From the course: CSS: Variables and Fluid Layouts

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Add media queries to your grid system

Add media queries to your grid system - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

Add media queries to your grid system

“

- [Instructor] Now that we have our prototype working in a desktop layout, let's rework this with mobile and tablet configuration. So first of all, we are going to take these styles here for column one to column four, and we'll just go on ahead and put these in a media query at media min width of, say, 768 pixels. And we'll go ahead and open up the set of curly braces. We'll close them down here after col four. Indent everybody to make it pretty, and so that's ultimately where we're going to be. So if we make our screen size over here narrower than that, what happens, we're back to that weird, everything just sort of stacks on top of each other, right? We'll have no flex basis of any particular width, why? Because the only place we're currently declaring our flex basis, right here inside of this media query. So let's set up a second media query for, let's say, tablet dimensions. I'm just going to copy what I…

Contents