Creating the Responsive Panel

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