1
00:00:00,640 --> 00:00:03,580
Hopefully, you were able to write most or
all five media queries for

2
00:00:03,580 --> 00:00:04,850
this practice session.

3
00:00:04,850 --> 00:00:06,070
Now let's walk through the solution.

4
00:00:06,070 --> 00:00:08,892
And you can also reference this code
when you download the project files.

5
00:00:08,892 --> 00:00:13,842
So first up, you were asked to target
viewport sizes less than 576 pixels,

6
00:00:13,842 --> 00:00:17,817
so the key words here are less than,
which should indicate that

7
00:00:17,817 --> 00:00:22,477
you should use the max with media
feature and the media query expression.

8
00:00:22,477 --> 00:00:27,052
Now, in the media query, you don't want to
target the viewport starting right at 576

9
00:00:27,052 --> 00:00:29,610
pixels, it needs to be less than that.

10
00:00:29,610 --> 00:00:34,210
So the expression, max-width,
575 pixels will do the trick.

11
00:00:35,240 --> 00:00:37,702
In the next block of CSS rules,

12
00:00:37,702 --> 00:00:42,911
to Target viewport sizes when
there are 576 pixels and wider,

13
00:00:42,911 --> 00:00:48,512
you'll use min-width 576 pixels
as the media query expression.

14
00:00:50,152 --> 00:00:53,700
Now, the next one is a little
different from the others.

15
00:00:53,700 --> 00:00:58,140
The nav rule needs to be inside a media
query that targets only a specific

16
00:00:58,140 --> 00:00:59,777
range of viewport sizes.

17
00:00:59,777 --> 00:01:03,692
So when the viewport is
greater than 575 pixels and

18
00:01:03,692 --> 00:01:07,230
when it's less, they're 992 pixels.

19
00:01:07,230 --> 00:01:11,230
So the keyword, and,
suggest that you should use the and

20
00:01:11,230 --> 00:01:13,340
logical operator to
combine media features.

21
00:01:14,530 --> 00:01:18,790
So to Target a viewport,
when it's wider than 575 pixels

22
00:01:18,790 --> 00:01:23,620
specify min-width 576 pixels and
to continue targeting

23
00:01:23,620 --> 00:01:28,010
the viewport all the way up to
a width narrower than 992 pixels.

24
00:01:28,010 --> 00:01:34,604
You specify the and operator followed by
the media feature max-width 991 pixels.

25
00:01:36,784 --> 00:01:42,315
Next, you target medium viewport
sizes that are 768 pixels and

26
00:01:42,315 --> 00:01:47,164
wider, using the expression
min-width 768 pixels.

27
00:01:51,784 --> 00:01:55,575
The last media query needs
to target large devices and

28
00:01:55,575 --> 00:01:59,200
up when a viewport is 992 pixels and
wider.

29
00:01:59,200 --> 00:02:02,420
So, similar to other media
queries in this exercise,

30
00:02:02,420 --> 00:02:07,753
you'll use the min-width media feature and
specify a minimum-width of 992 pixels.

31
00:02:10,553 --> 00:02:13,260
You may have written your media
query slightly different.

32
00:02:13,260 --> 00:02:18,260
For example, maybe you included
the screen media type before each

33
00:02:18,260 --> 00:02:21,780
of the media query expressions and that's
totally fine for this practice session.

34
00:02:21,780 --> 00:02:26,070
I left them out of mind to make the media
queries suitable for all devices.

35
00:02:26,070 --> 00:02:29,310
All right, so now your page should be
adjusting to the five break points

36
00:02:29,310 --> 00:02:30,150
you created.

37
00:02:30,150 --> 00:02:32,770
Now, if it's still not quite there,
that's okay.

38
00:02:32,770 --> 00:02:35,820
Just keep practicing these until
you feel comfortable using them.

39
00:02:35,820 --> 00:02:36,700
After a little practice,

40
00:02:36,700 --> 00:02:39,740
you'll be surprised by how much
better you're getting at CSS.

41
00:02:39,740 --> 00:02:42,759
I'm also going to teach you lots more
about media queries in an upcoming course.

42
00:02:42,759 --> 00:02:43,673
So, I'll see you soon.