Creating the Responsive Panel3: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.
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