When we talked about flex-direction, we talked about the ability to have your items shown in a row or in a column. Sometimes you want a row; sometimes you want a column. Sometimes you want both. Next lesson we’ll talk about having both at the same time, but in this lesson, we’ll talk about switching from one to the other.

A media query checks to see how wide the screen is and then displays your work as prescribed for that specific width. It’s one more way to build a responsive site, one that looks good on a TV and on a cell phone. Using % (percent) and vw (viewport) instead of pixels for font size and widths and such is one way to do it. Using flex to add automatic spacing to allow your content to be centered and spaced out no matter the screen size is another.

Media queries take it a step farther. When your screen gets down to a cellphone size, then it’s probably a good idea to take away any border margin that was around your whole screen. I often change my header image for a large and small screen. With a media query, I can tell it which picture to show depending on the screen size. I can also tell it when to show my flex items as a column instead of a row.

While flex is flexible and will eventually show a row as a column depending on how skinny a screen gets, maybe I don’t really want it wrapping the row around to another line willy-nilly once the screen gets smaller. Maybe I just want it to switch to showing as a column. I can give that order in a media query.

A media query specifies the screen size and then just writes any new CSS to be applied at that size. Everything else will still be applied, but any changes here will override what’s in the regular CSS. There’s no need to rewrite anything in the regular CSS, only what you want changed. It looks like this.

It is always written in that specific format and then you change the number.

@media only screen and (max-width: 760px) { } and the CSS changes go inside the brackets.

To find the breaking points in your code, where it starts to look wonky, inspect your screen. Right click on the screen and choose Inspect from the menu. If you are in full screen, click the little boxes by the close button in the corner of your browser to shrink the screen. Grab the side of the screen and pull it in and out. The number of pixels of the width will show as you move the screen.

You can have multiple media queries. I often have one at 960px and sometimes 480px. You can even specify between two widths like this.

@media only screen and (max-width: 740px) and (min-width: 480px) { }  This tells the browser to apply the CSS rules enclosed to screens that are at least 480px wide and at most 740px wide.

Here is a line of code to add to the HEAD of your HTML page. It can be set to different width screens, but this is a standard way to set it as we are working on optimizing our sites for lots of different sizes of screens. Remember, viewport is the screen.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can see this lesson online.