Hello, I am new and I am trying to learn Material Design Lite from:
In the “Tablet” and “Mobile” Viewports heading, It says that in Phone the columns should add to 4 but in the code the columns are adding to become 8.
Please help.
You can also see this image to better understand.

Thank you.
Hi @extrinima, that might appear confusing, yes 
If they added up to 4 (eg: mdl-cell--2-col-phone
, mdl-cell--1-col-phone
, mdl-cell--1-col-phone
) then the columns would all spread out across one row of the mobile screen. However, in this example, the first two columns (mdl-cell--2-col-phone
, mdl-cell--2-col-phone
) will fill up the row, so the next column (mdl-cell--4-col-phone
) will clear them and be pushed underneath:
Anyway, the point is that yes, mobile viewports will behave as though there’s space for four columns.
Hope that helps!
1 Like
Thank you Ian. Issue solved.