Search code examples
csstwitter-bootstrapmaterial-design-litegrid-system

Material design light. Grid system unexpected behavior

First of all a picture:

enter image description here

This is a screen from getmdl.io. I can not understand this behavior. I've sad, that i want exactly 3 column in a row with width of each one equals to 1/3 of row width. But in some screen resolutions width of column equals to half of row width. This comes from css instructions based on media queries and seems it's by design.

So my question is, can i prevent this behavior? If not, what is the reason of that behavior.

P.S. I have come from bootstrap and i didn't have this issue with it.

Solution

  • There's no way to achieve what you described out of the box way, if you insist on having 3 columns in mobile you must override the class as suggested by @JyotiPathania.

    Remember Material Design Lite grid system is totally different from Bootstrap. Bootstrap has a fixed 12 columns and scaled down for all viewports. In contrast, Material Design Lite has 12 for desktop, 8 for tablets and 4 for mobile. As such, a .mdl-cell--4-col will take 1/3 of the screen on desktop, 1/2 of tablet and whole screen for mobile.

    My suggestion is to avoid thinking in Bootstrap and overriding default MDL class, try to embrace the framework design decision. Otherwise, you'll be better off using a custom Bootstrap MDL theme.