A media query is a tool in CSS that allows for us to implement responsive design elements. When I say responsive, what I mean is what I'm going to show you right here. I have two nearly identical sites, one is responsive and uses media queries, and the other one is not.

After this demo, we're going to walk through the code and we're going to implement a full media query for this homepage.

Let's first look at a media query based site. If I open this up, what I can do is it looks good on desktop and then if I were to access this on a mobile device, which I can mimic by just bringing this down here, you can see that the entire site readjusts.

This is what someone coming on an Android or an iPhone would see. Do you notice how the logo has readjusted, it's now at the top, and then we have the navigation elements stacked on top of each other, and then the same thing with the contact information?

Then everything else has also readjusted so this is looking really good, this is the kind of experience you'd want to see on a mobile device. Now, if you open up a site that does not have the media query though, and then try to perform the same action, you're going to get very different behavior.

Notice now, if I take this down to the same size, that it does not readjust.

So someone accessing the site's going to load it up and they're going to see this distorted looking page. They're going to have to scroll to the right, a bunch of things are kind of shrunken and overlapping, and this is really not a good experience. This is the reason why media queries are so powerful.

Now that we have a good idea on what they are, let's walk through how we can implement them. I have this page open and I have the code open for it right here. So I'm going to start by creating a new style sheet here called media queries. And this isn't necessary, this is just because I want to be able to have all my media queries in one spot. It will also be easy for us to see them.

Let me open that up and in the styles directory, I'm going to save a file called media-queries.css. Then here, we're going to be able to add all of those. Now, the syntax for using a media query is ... it looks a little bit different if you've never used it before. It starts with an @ symbol, then you say media, then this is a method or a function so that means it takes in arguments.

The very first thing that we have to provide is the breakpoint. So if I say medium max-width and then I'm going to use 615 pixels.

media-queries.css

@media (max-width: 615px) {

}

What this is going to do is this is going to say that whenever we have a screen that is below 615 pixels wide, which is a pretty standard size for using with smartphone devices, then I want you to apply these styles.

Now, whenever you're using media queries, a trick to make sure that you are following is your media queries should be at the very end, they should be the last styles that you include. The reason for that is because if you have media queries and then you call other styles after that, they will override it.

And so you need to make sure you call that at the very end. And what this is going to do is the browser's going to look, it's going see all of these media queries, and it's going to check and say, "Okay, these are the styles I am going to apply, and I'm going to run these if the screen is 615 pixels or less." And you could do this for any of them, so let's just test this out.

If you look at the index.html here in the navigation wrapper, you can see that we have navigation wrapper and then we have all of these items inside of it. We have a left column, a center column div, and then a right column. I think this is going to be a great place to start.

So if I say navigation-wrapper, then inside of here, I'm going to change the flex direction. Instead of having the default row, I'm going to change it to column, then I also want to update the height so it's 100%.

media-queries.css

@media (max-width: 615px) {
    .navigation-wrapper {
        flex-direction: column;
        height: 100%;
    }
}

Let's see what this does for us on our site that previously was not working on mobile.

Let me open this up in a new browser window. Now, if I shrink this down, you can see that when we hit that breakpoint, you can see this gets readjusted.

Before, that was not working. Before, it just simply went to the side and then it didn't shrink down and it didn't stack it on top of each other like that. So that means that our media query is firing and it's working. Now, we still have some work to do, because this doesn't look very nice, we still have to adjust some of the other items.

I don't want the phone number here at the top, I want to have the logo at the top and we're going to be able to leverage Flexbox in order to make that possible. So I'm just going to take this down to about right here, about this size. Now, when we switch back, we're just going to be able to look at that and I'm also going to keep the code open at the same time, so that we can save some time and just look at it simultaneously.

Okay, now that we have our navigation wrapper updated, I want to talk about a very powerful tool inside of Flexbox that you may or may not be aware of. So Flexbox gives you the ability, not simply to line out and align your items in a really nice and easy manner, it also gives you the ability to change the order.

And so that is how we are going to readjust the order that these elements are shown. This is one of my favorite parts about Flexbox. So right here, if you remember we have our left column, our center column, and then our right column. So what I can do is say navigation wrapper, then I want to grab the left column, just like this. Then inside of here, I want to change the order to two.

And that's going to allow us to change the default order, because usually the order is simply the order that it is declared in the HTML. But what we can do is we can actually override that using Flexbox. and I'm also going to add some margin top and some margin bottom, so let me do 10 pixels on the top and then margin bottom, I'm going to go with, let's say 15 pixels and that's all we need the left column.

media-queries.css

.navigation-wrapper > .left-column {
    order: 2;
    margin-top: 10px;
    margin-bottom: 15px;
}

Now, for the center column, remember the center column is the logo. If you want to take a look at it, this is the final site, but this also is what we started with. So here you can see that the left column is the phone number and the hours, the center column is the nav component and logo, then the third column is this address here, and that's what we're looking to adjust.

I want to take the center column and I'm going to change the order here so that the order's going to be one, then I also want to change the width. The width here is going to be 100%.

media-queries.css

.navigation-wrapper > .center-column {
    order: 1;
    width: 100%;
}

Then lastly, we want to grab the right column and, as you may have guessed, since we used two on the left column, for the right column, we want to use three here. Then I'm going to also just add some margin on the top, so here I'm going to say 15 pixels.

media-queries.css

.navigation-wrapper > .right-column {
    order: 3;
    margin-top: 15px;
}

Now, this isn't going to be perfect yet, because we still have those links that we need to fix, but this might get us a little bit closer. So let's see, hit refresh and you can see that is looking much better.

Do you see how we have this logo now that is at the very top? Our images, or I'm sorry, our links here, these need to get fixed, that's what's pushing everything over. But we can see that everything now is in the correct order, and so that is looking really nice. As you can see, all we have to do is because we leverage Flexbox, we're able to alter that order and control exactly how we wanted the page to be rearranged.

So now let's switch over to the index.html page. And let's see, we have a class of links wrapper and then a nav link inside of each of those. So that's going to be the next class that we're going to add to our media query here.

Now, what we can do is we'll say links wrapper, and then here inside of it, if you're using Flexbox and you want to change the order so it's no longer showing from left to right, but instead it goes from top to bottom, you can simply change the flex direction.

We're going to change that to column and then I'm also going to add some margin to the bottom. And for that, we'll go with 20 pixels, then let's also update the nav link, but before we do that, let's just see where we're at.

media-queries.css

.links-wrapper {
    flex-direction: column;
    margin-bottom: 20px;
}

If I hit refresh that is looking much better.

See, that this is exactly what we're looking to do. So that is how we're able to leverage media queries to be able to adjust dynamically how the page is laid out, so I'm really liking that. Now, let's go to our links wrapper, we're going to select all of the nav links, so the nav link class.

And inside of here, I'm going to just add ... They're stuck a little bit close together. That would be hard for someone on mobile to click the right button. Let's add some margin to the top and bottom. Then from there, we're going to update the font size. Let's go with 1.5em, then lastly, we're going to adjust the width to be 100%.

media-queries.css

.links-wrapper > .nav-link {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5em;
    width: 100%;
}

Now, if you hit save, come back, hit refresh, there you go. Now, what we've done is we've completely changed the layout of this nav bar so that it matches exactly what we're wanting on a mobile device.

Imagine you are building out this website and you're building it for a restaurant, just like we have here, and someone clicks on the link from Yelp. They are going to want to see something that looks like what we have here, not a distorted site where they don't even know where to click or anything like that. They want to have something that really fits with that mobile user experience, and we're able to leverage media queries in order to do that.

Let's just review, really quick, what we've done. The syntax, once again, for a media query is using the @ symbol, the word media, then defining the width. So you can have multiple media queries, you could have a media query that is for smartphones. Then you can adjust and have a media query that is for iPads or tablets. You could have as many media queries as you want, and then the page would dynamically change.

So this is almost like a conditional, you can think of this as being a way that you can tell the browser that these are different rules that you want it to follow whenever the user is on a different screen size. Then from there, you simply have to call that in the HTML, just like we did right up here and it's going to work and it's going to readjust.

Then lastly, using tools like CSS Grid and Flexbox give you the ability to control how you want the layout to change. If you weren't using a tool like that, it'd be much harder to change the order, like we have right here. But because you have those kinds of tools in place, you can simply readjust the entire page based on the screen size.