3.6 Responsive Panel Adjustment

Hey welcome back to XD to code with avacode three. In the last lesson we finished up getting the content set up for each of our panels two through five. In this lesson, we're gonna set up some media queries so that all the content fits comfortably no matter what size our view port is. Now things look still fairly good when you start shrinking things down, so we don't really need to put a media query in here like we did with our panel one section. So we're not gonna add anything to our 75 rem media query or our 65 rem. But we are going to add something in to our 55 rem media query. So what we're gonna start with is making some adjustments to our spacing variables that we've used so far. So we're gonna go all the way back up to the top, and we're gonna copy these three spacing vars that we've been using so far. This one's gonna come into play a little later. We'll go down to our 55 media query, and we're gonna paste those in. And now we're going to adjust them, we're just gonna shrink them a little bit so they're not taking up so much space. So we'll take this one down to 1 rem, take medium down to two rem and we'll take large down to four rem. And now we're also gonna need to adjust the heading sizes as well. They're taking up a little bit too much space so let's just copy all of our heading styles. Come back down to the 55 media query. Paste those in, and we only need to modify the font size. So let's just get rid of the other lines. So we're gonna bring our H1 size down to two rem. H2 is gonna be 1.8. H3, 1.6. H4, 1.4. H5, 1.2. And H6 can be at 1 rem. So you see that we're going in increments of 0.2 rem so that we have an even transition all the way through our various heading sizes. So let's set that out and have a quick look, so let's start shrinking things down. And there you can see we have that break point kicks in. It reduces the amount of space around the outside and shrinks down our headings. Let's just have a look at these other headings as well. So that you can see that things can still fit quite snugly as we're shrinking down in size. Next up in the 45 rem query, we're gonna modify our spacing values again. So let's just copy this text here, paste that in at the top of our media query. We're not adjusting our arrow so let's drop that. Let's bring our spacing down again. 0.75 for small, 1.5 medium, and 3 for large. And we're gonna shrink our headings down a little bit smaller again. We're actually just going to change heading one through five though, because we really can't make heading six any smaller. You never want to have any heading be smaller than your default text. Default text is always 1 rem. So we're just gonna scale everything else down. Heading 1 will become 1.5 rem. Heading 2, 1.4. 3 is 1.3. 4 is 1.2. And 5 is 1.1. And then we're just gonna adjust our spacing one more time. This time we're going to adjust spacing in the 35 rem media query. Actually just copy this code in here. So we'll set our small spacing to 0.5, medium spacing to 1 rem, and large spacing to 2 rem. And then that should be all we need to make sure that our content in these panels fits nicely all the way as we shrink down our viewpoint. So you can see the spacing shrinking as we go as well to make sure that when we have a limited amount of space, we're not just filling up with emptiness. So now everything is using its spacing as efficiently as possible, and we're keeping things readable right down to the smallest width at which it's still practically possible to make text readable. So that is everything that we needed for our panels two through five. In the next lesson we're gonna start working on panel six. We'll start with a quick setup for this panel in the next lesson. In the lesson after that we're gonna set up a dual image that's made to look like one image. And then in the lesson after that we'll make the whole lot responsive. So first up, our quick panel setup. And I'll see you for that in the next lesson.