4.3 Make Panel 6 Responsive

Hey, welcome back to XD to code with Avocode 3. In the last lesson, we got our image here which is made up of two images, so that it scales and it all looks like it's part of just one image. And in this lesson, we're gonna add in some code to our media queries so that this section is changing its layout to suit smaller widths when they happen. So, we're gonna start in a 75 rem media query. And the first thing that we're gonna do is shrink down the size of our extra large padding. It's making too much empty space around the outside of our content. So we're gonna add in a root element to tag it and then we're gonna change up our spacing_extra_large variable. And we're gonna bring it down to 6 rem. And you recall, we also set up a grid on our panel six class. Now we're just gonna bump the columns over a little bit to make more space for the content. So we'll target panel_six. And we're gonna reset the grid-template-columns. We're going to set them to 40%, 60% so we've got more room on the right side. So let's see how that looks. So as we shrink down, you go we can see that we're getting a little bit more space. However, right now you can also see that this text here is lower than the tablet which shouldn't happen because we set the tablet to be vertically aligned. The reason that's happening is because there's a margin above this heading that's making some extra space that we don't really want. So back in our 75 rem media query. We're gonna target the panel_six h1 element and we're gonna set it's margin-top to 0. So now that's correcting it, and we got the same amount of space here as we do here, so that's all even. Going down to our 55 rem media query, we can adjust our spacing again a little bit more. Actually, let's just copy this line here, paste that in here and we are going to reduce that extra_large_spacing to 4 rem. So let's check that out. So we shrink down, and then you can see that, the spacing there, Is getting smaller. We'll do a little bit more adjustment on the grid-template-columns for panel_six. So just copy this from our last media query and paste that in. And we're actually going to go back the other way and change these columns back to 50-50. So I'll show you the effect of that. So we've got our first shifts in column size and then there we go to 50-50. And that looks about right, so again, just eyeballing everything. Then at our 45 rem media query, we're gonna adjust our spacing var again, so let's just copy, add that in here. And now we're gonna have our extra large spacing at 4.5 rem. The reason that we're gonna increase it a little bit again is because we're now at a width where there's not enough room for two columns. So we're also gonna grab our panel_six column code, paste that in and now instead of having two columns, we're just gonna have one column in our grid of 100% width. So now when we shrink down, we'll reach a point. There we go. Where we now have our two columns are actually stacked on top of each other. So now we're gonna need to change up the position of the tablet so that it's horizontally centered. So we're gonna target our tablet class. We no longer need to use top positioning or transform to vertically align it because we don't need to vertically align it. We need to horizontally align it now, so we set that to 0 and to none, transform. And now it's horizontally centered. We're just gonna use margins, so we're gonna say margin. So we don't need any top margin, so we're gonna put in 0 for our first figure. We want our horizontal margins to be automatic, so we'll put in auto for our right margin. We do want a gap underneath the tablet though. So for our bottom margin, we're going to set var spacing_large. And then for our left margin, we will set that to auto. So now, let's take a look. All right, so now our tablet is nice and centered, and we've got a nice gap in the middle here. And that's gonna scale. So, you can see all of the results of the effort, getting that tablet working the way we wanted it to. And the last thing to do is down in the 35 rem media query, we're just gonna need to adjust that extra large spacing once again. So, let's speed it up by copying this text here, pasting it in. And now we're gonna set that spacing value to 3 rem. All right, so let's check it out. Now as we shrink things down, everything is looking pretty good. All the way down to pretty much the minimum width you really need to worry about. About 320 practically speaking is the smallest size that you're going to get. We can actually probably support even a little bit smaller. But there aren't really any real world devices that are any smaller than that width. So that is all good to go. Now we've just got one more major content area to add in, and that is our seventh panel here which has a lot in common with our sixth panel. We're gonna be setting up the laptop in the same way that we set up the tablet. The content is just about the same. We're just gonna be adding in a background image. And then in this case because we have content on the left and in image on the right, we're gonna look at how we can swap these cells in the grid that we're using to align them. So that when we collapse down to a single column, the image comes first, meaning it'll be on top, and the content comes second. So we're gonna check all of that out in the next lesson. I'll see you there.