The way that I like to think about this, if media queries are still a little bit foreign or hard to understand, is I like to think about media query as almost as if they are a site within your site.

So think about these styles as being styles that you would build if you had to design a page that would render at certain screen sizes. That's the way that media queries really made sense to me.

Now, I also want to show you a helpful little tool if you are using Visual Studio Code, and it's going to help automate our process.

Up until this point, for the most part, we've had the layout where we have our screen here, we have our text editor, and then we'd switch back into the browser and then hit refresh, but since we have the browser right here, then it makes sense to use a tool in Visual Studio Code called live server.

What this is going to do is it's going to give us an automated way of updating, so every time that we hit save it is going to automatically update the page, so we're not going to have to switch over and hit refresh.

It's just a nice way of being able to automate our workflow. And after it's done, just click reload like I just did right there, and then you should be good to go.

If you click on it, it'll give you some details for exactly how it works, and so you can see that you have the ability to start it up and it has a bunch of little commands, but we'll walk through those as well.

Now let's open our index.html, if you right click on this page, you can say open with live server, and this opened up in another window, and let me pull that down here just so it's something we can see.

This is just going to really help to make our process more efficient because now all we're going to have to do is hit save and then we're going to see the results of our work. That's kind of the workflow that I usually have whenever I'm building these out, but I'm usually working on a larger screen.

This is looking good, and we can test it out. So let's say that we changed the phone number to 3333 just like that, and if I hit save, it will automatically update in our browser. So that is how it works, and it's a really nice little tool.

Like I said, throughout this course, I always want to make sure that I am giving you not just the best advice on how to build out your applications, but I'm also teaching you various workflow techniques that have helped me through the years.

Now that we have this in place, let's keep on moving down the line. So we have everything done that we need to have done for our nav bar. Now let's update our hero unit.

I'm going to come down right below the links wrapper, and I'll say hero-section, and inside of here, I'm just going to update the padding.

media-queries.css

.hero-section {
    padding: 50px 10px;
}

You can see that that re-adjusts it perfectly and that's looking really good.

That is literally all we have to do for the hero section. You can see the parallax feature is still working nicely.

Let's keep on moving down the line, and now under the hero section we have the features section, and for this, I'm going to change the height so that it is going to be 100%.

media-queries.css

.features-section {
    height: 100%;
}

Now, that's not really going to change it because we first have to go and we have to adjust our columns and everything that we have going on there.

We have the features section and then the columns wrapper, and you're going to notice a pattern here and we're going to be able to start building out a lot of these styles pretty quickly because they're going to be very similar.

media-queries.css

.features-section > .columns-wrapper {
    width: 100%;
    flex-direction: column;
}

Let's look at that.

We now have adjusted our features section so that they are now stacked on top of each other when they are on a smaller screen. So that is looking really nice, and let's just keep on moving down the line.

You can see the map was already set at 100%, so that's working perfectly, and then we have a few little issues here with the footer. So let's see exactly what we need to do in order to fix those. I think one of the first things I'll do is I'm just going to give it a height.

media-queries.css

.footer {
    height: 100%;
}

If I hit save, there we go. That's all we needed.

And so you can see just another example of why it is so helpful to have some of those classes, like the links wrapper class. Do you see how that automatically was populated here on the footer and that works absolutely perfectly?

That is the full set of styles for the homepage. That is all that we needed to do. So in the next guide, we're going to keep on moving down the line and we're going to work on the other pages.