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.
https://dl.dropboxusercontent.com/u/12360312/screenshot_mdl.jpg
Thank you.
Yes that is very confusing.
I’ve never looked at that grid before (and I hate grids - although I have used bootstrap a number of times) but it looks to me as though what they meant to say that was a row in the phone layout will consist of 4 columns so in the example the first two divs (col-2-phone) will fit in the phone width and the third div col-4-phone will sit underneath and full width.
If you wanted all three divs in one row for mobile then you would need to set two of col-1 and one of col-2 but that would leave you with very narrow columns across the screen. A better approach would have been to make each col-4 for mobile so they stack vertically as two columns are two small. Indeed in tablet you have words sticking out of the side columns so a bad example all around I think.
Thanks Paul.
OK I will do a try or test and let you know.
Paul issue solved.
Actually there is nothing wrong on it.
In mobile, 4 means the col will take full width.
So one col with 4 means it will take full width.
Two cols with 2 and 2 means they will take 50% and 50% width… Like that.
Yes that’s what I said 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.