Preview
Video Player
00:00
00:00
The Media Queries Solution
2:44In this video, we'll go over the media queries for this practice session.
Hopefully, you were able to write most or
all five media queries for
0:00
this practice session.
0:03
Now let's walk through the solution.
0:04
And you can also reference this code
when you download the project files.
0:06
So first up, you were asked to target
viewport sizes less than 576 pixels,
0:08
so the key words here are less than,
which should indicate that
0:13
you should use the max with media
feature and the media query expression.
0:17
Now, in the media query, you don't want to
target the viewport starting right at 576
0:22
pixels, it needs to be less than that.
0:27
So the expression, max-width,
575 pixels will do the trick.
0:29
In the next block of CSS rules,
0:35
to Target viewport sizes when
there are 576 pixels and wider,
0:37
you'll use min-width 576 pixels
as the media query expression.
0:42
Now, the next one is a little
different from the others.
0:50
The nav rule needs to be inside a media
query that targets only a specific
0:53
range of viewport sizes.
0:58
So when the viewport is
greater than 575 pixels and
0:59
when it's less, they're 992 pixels.
1:03
So the keyword, and,
suggest that you should use the and
1:07
logical operator to
combine media features.
1:11
So to Target a viewport,
when it's wider than 575 pixels
1:14
specify min-width 576 pixels and
to continue targeting
1:18
the viewport all the way up to
a width narrower than 992 pixels.
1:23
You specify the and operator followed by
the media feature max-width 991 pixels.
1:28
Next, you target medium viewport
sizes that are 768 pixels and
1:36
wider, using the expression
min-width 768 pixels.
1:42
The last media query needs
to target large devices and
1:51
up when a viewport is 992 pixels and
wider.
1:55
So, similar to other media
queries in this exercise,
1:59
you'll use the min-width media feature and
specify a minimum-width of 992 pixels.
2:02
You may have written your media
query slightly different.
2:10
For example, maybe you included
the screen media type before each
2:13
of the media query expressions and that's
totally fine for this practice session.
2:18
I left them out of mind to make the media
queries suitable for all devices.
2:21
All right, so now your page should be
adjusting to the five break points
2:26
you created.
2:29
Now, if it's still not quite there,
that's okay.
2:30
Just keep practicing these until
you feel comfortable using them.
2:32
After a little practice,
2:35
you'll be surprised by how much
better you're getting at CSS.
2:36
I'm also going to teach you lots more
about media queries in an upcoming course.
2:39
So, I'll see you soon.
2:42