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.
You can also see this image to better understand.
Hi @extrinima, that might appear confusing, yes
If they added up to 4 (eg:
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) 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!
Thank you Ian. Issue solved.