May 2017
Intermediate to advanced
388 pages
7h 30m
English
How can we make this grid responsive to different screen sizes?
This is a pretty simple thing to do using media queries:
@media screen and (max-width: 600px) { [class*="col-"] { width: 100%; } }
With this definition, we are saying that when screen (mobile or tablet) and browser window are at max-width of 600px, all class names that contain col- in their name set their width to 100%. To test it, manually resize the browser, and you'll see that when the size of the window is 600px, the query will hit a breakpoint and set all the columns' width to 100% dynamically.
Read now
Unlock full access