Welcome back.
In the last video, we had this problem of The View getting a little bit ugly with our navigation as
we became smaller and smaller with our viewport.
How can we fix this?
And here, I'm going to show you a topic that actually cover in my next course, but just because it
might be useful for this case, I'm going to introduce you to something called media queries.
And media queries allow us to create responsive websites and tell our Web pages what to do when the
size of our screen gets small or big.
And I'll link to this website over here.
But essentially what it allows us to do with media queries, we can have devices, tablets, laptops,
wearables that have different screen sizes and tell it how to display our Web page based on those sizes.
For example, here it shows us what our viewpoints will be for iPhone four and iPhone for us.
And using this syntax of at media only screen and giving it some minimum device with an max device with
we can tell it how to display our page or have access properties specific to just this view size that
is minimum view.
Size is going to be three hundred twenty pixel and max is four hundred and eighty pixels.
And as you can imagine, there's a lot of these based on different devices and viewpoints now, things
like grid and flex box actually resolve a lot of this.
But I want to demonstrate just one use case with our little example.
That is this contacts getting smushed, so let's create our own media query for our navigation in order
to do that, all we need to do is say at media.
We say only screen and this is saying, what do we want our media query for?
And you can do things like print here, for example, when you're printing something.
But ninety nine percent of the time you're just going to have screen.
And here we're going to say and we'll say that max width.
Is going to be six hundred pixels, that is use this excess properties that we're about to define right
here, only when max width is six hundred pixel, that is as soon as this is less than six hundred pixel
in width.
I apply these properties here, so I'll say Maine NAV will have a font size, we can do different things
here, but let's just say a smaller font size and maybe we'll do padding of zero just so they're closer
together.
If I say this and refresh.
Everything fits in because our font size is smaller and we've removed any extra padding that we may
have, but notice here as I make things bigger.
You see that as soon as I pass six hundred pixels, we restore our default with larger font size.
Look at that, so using media queries, we just made our nav bar more responsive.
Nice and easy.
And this is a common pattern that I recommend with your navigation that is having our NAV element with
an unordered list and an ally list.
Our main nav, which will be a flex box and will have a push class that uses this margin, left auto
to push whatever we want to our NAV to the right side, usually something like contact or log in to
have it all the way to the right.
So hopefully this wasn't too bad.
Like I said, you don't need to memorize this.
You can even copy the code that I'll leave for you at the end of these videos.
Once you get used to this syntax, you now have a solid foundation to build the navigation.
But we have three more things to go.
So let's get to that in the next video.