1
00:00:00,630 --> 00:00:01,210
Welcome back.

2
00:00:01,590 --> 00:00:07,950
In the last video, we had this problem of The View getting a little bit ugly with our navigation as

3
00:00:07,950 --> 00:00:10,350
we became smaller and smaller with our viewport.

4
00:00:10,890 --> 00:00:11,970
How can we fix this?

5
00:00:13,250 --> 00:00:19,880
And here, I'm going to show you a topic that actually cover in my next course, but just because it

6
00:00:19,880 --> 00:00:24,530
might be useful for this case, I'm going to introduce you to something called media queries.

7
00:00:26,140 --> 00:00:33,790
And media queries allow us to create responsive websites and tell our Web pages what to do when the

8
00:00:33,790 --> 00:00:36,790
size of our screen gets small or big.

9
00:00:37,210 --> 00:00:39,510
And I'll link to this website over here.

10
00:00:39,850 --> 00:00:47,500
But essentially what it allows us to do with media queries, we can have devices, tablets, laptops,

11
00:00:47,500 --> 00:00:54,130
wearables that have different screen sizes and tell it how to display our Web page based on those sizes.

12
00:00:54,980 --> 00:01:01,360
For example, here it shows us what our viewpoints will be for iPhone four and iPhone for us.

13
00:01:01,930 --> 00:01:13,120
And using this syntax of at media only screen and giving it some minimum device with an max device with

14
00:01:13,480 --> 00:01:22,360
we can tell it how to display our page or have access properties specific to just this view size that

15
00:01:22,360 --> 00:01:23,790
is minimum view.

16
00:01:23,800 --> 00:01:28,420
Size is going to be three hundred twenty pixel and max is four hundred and eighty pixels.

17
00:01:29,430 --> 00:01:36,900
And as you can imagine, there's a lot of these based on different devices and viewpoints now, things

18
00:01:36,900 --> 00:01:40,380
like grid and flex box actually resolve a lot of this.

19
00:01:40,680 --> 00:01:44,700
But I want to demonstrate just one use case with our little example.

20
00:01:46,650 --> 00:01:55,920
That is this contacts getting smushed, so let's create our own media query for our navigation in order

21
00:01:55,920 --> 00:01:58,770
to do that, all we need to do is say at media.

22
00:02:00,440 --> 00:02:05,390
We say only screen and this is saying, what do we want our media query for?

23
00:02:05,580 --> 00:02:09,170
And you can do things like print here, for example, when you're printing something.

24
00:02:09,410 --> 00:02:12,690
But ninety nine percent of the time you're just going to have screen.

25
00:02:13,460 --> 00:02:19,190
And here we're going to say and we'll say that max width.

26
00:02:20,280 --> 00:02:29,220
Is going to be six hundred pixels, that is use this excess properties that we're about to define right

27
00:02:29,220 --> 00:02:36,870
here, only when max width is six hundred pixel, that is as soon as this is less than six hundred pixel

28
00:02:36,870 --> 00:02:37,440
in width.

29
00:02:38,320 --> 00:02:48,010
I apply these properties here, so I'll say Maine NAV will have a font size, we can do different things

30
00:02:48,010 --> 00:02:55,150
here, but let's just say a smaller font size and maybe we'll do padding of zero just so they're closer

31
00:02:55,150 --> 00:02:55,560
together.

32
00:02:56,500 --> 00:02:58,480
If I say this and refresh.

33
00:03:00,950 --> 00:03:06,410
Everything fits in because our font size is smaller and we've removed any extra padding that we may

34
00:03:06,410 --> 00:03:10,160
have, but notice here as I make things bigger.

35
00:03:12,550 --> 00:03:20,380
You see that as soon as I pass six hundred pixels, we restore our default with larger font size.

36
00:03:22,510 --> 00:03:28,570
Look at that, so using media queries, we just made our nav bar more responsive.

37
00:03:30,270 --> 00:03:31,280
Nice and easy.

38
00:03:32,620 --> 00:03:40,720
And this is a common pattern that I recommend with your navigation that is having our NAV element with

39
00:03:40,720 --> 00:03:43,510
an unordered list and an ally list.

40
00:03:44,700 --> 00:03:53,370
Our main nav, which will be a flex box and will have a push class that uses this margin, left auto

41
00:03:53,370 --> 00:04:00,960
to push whatever we want to our NAV to the right side, usually something like contact or log in to

42
00:04:00,960 --> 00:04:02,140
have it all the way to the right.

43
00:04:02,730 --> 00:04:04,700
So hopefully this wasn't too bad.

44
00:04:04,830 --> 00:04:07,470
Like I said, you don't need to memorize this.

45
00:04:07,630 --> 00:04:11,460
You can even copy the code that I'll leave for you at the end of these videos.

46
00:04:12,270 --> 00:04:17,520
Once you get used to this syntax, you now have a solid foundation to build the navigation.

47
00:04:18,540 --> 00:04:20,130
But we have three more things to go.

48
00:04:20,130 --> 00:04:22,050
So let's get to that in the next video.