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