Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Modular CSS with Sass

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating the Responsive Panel

3:09 with Guil Hernandez

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.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up