Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Next, we'll use the media query mixin to set the max-width of the grid container. Then, we'll revisit the panel layout component and add media queries that define styles for the small and medium grid breakpoints.
-
0:00
So, next, we'll again use our new media query mix-in to set the max width for
-
0:05
our grid container.
-
0:06
So, in the grid container.scsspartial, let's replace
-
0:12
this media query by including our mq mix-in in its place.
-
0:17
So, we'll say @include mq.
-
0:21
And let's pass the large media query breakpoint.
-
0:25
All right, so we can go ahead and save our grid container partial.
-
0:29
And since we're all done with this, we can close it out.
-
0:32
And then, next, remember that panel layout component we built a couple of stages ago?
-
0:37
Well, let's revisit that.
-
0:39
And this time, we'll add media queries that define styles for
-
0:42
these small and medium breakpoints.
-
0:45
So, first in the panel default placeholder rule,
-
0:49
we still want the top padding equivalent to 30 pixels and EMs by default.
-
0:55
But, in the medium grid is,
-
0:57
we'll want to set the bottom padding equivalent to 20 pixels and EMs.
-
1:01
So, right below the padding top declaration will include a media query,
-
1:07
and lets pass the medium break point, so now the bottom
-
1:14
padding will be applied only when the view port is at 769 pixels or higher.
-
1:19
So, next, right below in the panel padding [UNKNOWN] rule.
-
1:23
Let's make the top padding equivalent to 34 pixels, and it's by default.
-
1:29
But in the medium grid, we'll want to bump the top padding to 80 pixels, and
-
1:34
set the bottom padding equivalent to 34 pixels in em.
-
1:37
So, we'll leave these values alone.
-
1:39
And right up top, I'll just go ahead and copy the top heading declaration,
-
1:45
and let's set it to 34 pixels by default,
-
1:49
then right below I'll include a new medium breakpoint.
-
1:54
So I'll just go ahead and copy the media query included from above and
-
1:58
paste it in the panel padding placeholder rule.
-
2:01
Okay, so that should do it.
-
2:03
So, when we save our Extenz file and bring up the preview, we can see
-
2:09
how the generous padding is still applied in the medium and large break point.
-
2:15
But once the view port is at 768 pixels or
-
2:18
lower, a lot of the top panel padding is removed, and we can see that right here
-
2:23
[BLANK_AUDIO]
-
2:27
Finally, let's also revisit our nav module.
-
2:30
But this time, it's your turn to use what you've learned so
-
2:33
far about modular assess, to optimize the nav for mobile devices, and
-
2:37
narrow viewport sizes, because currently, it's not.
-
2:41
So, I'd like to see you lay out and install the nav module, for
-
2:44
the small breakpoint, like we're seeing here.
-
2:47
Remember to avoid repeating, resetting, or undoing CSS properties.
-
2:51
Try to abstract as much as you can if it makes sense.
-
2:55
And if you want, you can share what you've done on our forum.
-
2:58
In the next video, I'll quickly show you how I did it.
-
3:01
Then we'll finish up the course by creating hidden, visible, and
-
3:04
collapsed states for some of our modules, including the main navigation.
You need to sign up for Treehouse in order to download course files.
Sign up