3.3 Make Panel 1 Responsive

Hey, welcome back to XD To Code with Avocode 3. In this lesson, we're going to solve the responsive issues that we've got here with our panel one section where the text is spilling over, and also to shrink down, you can see the arrow Is looking fairly gigantic in relation to the rest of the content. So, we're gonna fix all of that up with a series of media queries. But there are a few different approaches that people use to creating media queries. Some people prefer to have a fixed set of predetermined media queries, such as with to represent phones, one for tablets, one for laptops. However, the problem with that approach can be it's very possible that there can be a width in between phone and tablet size, or between tablet and laptop size at which the layout is completely broken. So my advice is that a better approach is to progressively scale down your entire layout and watch it for breaks. Wherever you see the layout break, add a break point and correct that problem. So, all of the media queries that we're gonna be adding in here, these are points at which I have already previously gone through this design, seen that the layout has broken and I've made an amendment to deal with that break. All right, so the first media query we're going to add in is at 75 rim. Now if you remember, 75 rim is the width of our site wrapper. So basically, as soon as that view port comes down and is narrower than the maximum width of the site wrapper, we're going to start making changes. So adding in our media query at media [SOUND]. And we're gonna set that to max width: 75 rem. And in here, we're gonna make some adjustments to the font size of the title and tag line. And one of the easiest things that you can do to kick off your responsive functionality is to switch over from using fixed font size values, as we have so far where we have rem values up here to view port with base values, once your layout is narrow enough. And the reason that we're doing that is because if you're using view port with base values, and the smaller your view port widths get, then the smaller your text can get. And it could do some degree of automatic scaling. So, we're gonna add in our title class. And we're gonna set the font size to nine vw, which is 9% of the view port width and that’s roughly the same as the font size that we already have. And for our tag line, we're gonna set the font size to 1.5vw. All right, so now, let's check that out. So as we shrink down, you'll see a little jump in the size of the text. There it is right there, you can see that little jump. And now that we have view port with based values, as we shrink down, the text goes along with it. But what we can also see at this area is already there's not really enough space for this tile, so the next thing that we want to do is increase the size of this cell in the grid that we created earlier. We're going to set up another query. And it's going to be at 65 rem. We're going to target our center panel one tile class. We're gonna bump up the size of that central cell. So, for our grid template, columns, set them to auto. Where it was 50 %, now it's gonna be 55 %. And we'll do the same thing for our grid template rows, where it was previously 45%, we're gonna bump up to 50%. So now let's take a look. We'll shrink down. And there you go, you can see that that center cell gets a little bit bigger, so we've got more space to work with. And when we get to this point as well, we're going to start shrinking down this arrow so that it's not getting gigantic compared to the rest of the content. And because we used variables, all we need to do is change the value of our arrow width variable. So we'll add in a new route element selector, and we're gonna change arrow width, To equal 5rem. Now when we shrink down, you can see there the arrow has shrunk down as well. So we're gonna be able to keep changing that variable to keep that arrow size looking in proportion. Now let's just use all this code again, This time at the 55 rem mark. We're going to drop our arrow down to 4.5. We're going to make our center cell a little bigger again. We'll make it 60 and 55. We're going to modify our title and tagline text again. We're going to make them both a little bigger. So we're going to set our title to 12. And our tagline to two. Because now that we've increased the size of that center cell, there's more room for the text to take up. And because we're shrinking things down quite a bit now, we don't want the panel to have that same 16.9 ratio anymore. We want it to have a bit more height than it did before. So we're going to add in our panel 1 selector and we're going to bump the padding top value up to 75 %. So now it's going to be three quarters as high as it is wide. Let's have a look at the results of that. So there you go, you can see that shift there. Our panel1 section has gotten higher, and that central content area has adjusted as well. Now, let's have another media query, just shrinking this down all the way as we go. We'll change that to 45. And we're gonna change the panel 1 padding again. Now it's gonna be completely square so we're gonna change that to 100%. We can now adjust our grid, title, and tag line again. So we're gonna change this to 85%. Change this to 50. We're gonna drop the size of the row, change our title text to 15, and we're gonna change the tagline to 2.6. Let's take a look. So, as we shrink this down, there's our next bump. So everything is looking pretty neat and tidy. Now, I've just got a couple more adjustments we're gonna make with a media query at 40 rem. And all we are going to do here is change the tag line text and push that up to 2.75. We will have another one. At 35 rem, we're gonna change the arrow size again, so let's copy this code. Add that in here. And now we'll bring our arrow down to 3.5 rem. We're gonna change our panel one padding once again. This time, we're gonna up it to 120. And we're gonna change our tagline font size to 3vw, another media query, at 30rem, changing the tagline to 3.5vw and one more, At 25rem, which honestly is probably smaller than you really need to worry about. But just to be thorough. Going to change the panel one aspect ratio again. Want to bump that up to 150. So now, we've got a smooth range of media queries. We're going in pretty much five rem increments and then coming up to ten rem increments. And we're making adjustments all the way along that spectrum. We can start all the way out here at our maximum width. And now we can just smoothly graduate all the way down, any size we want and everything fits in beautifully. So that is my recommended approach to how to do responsive functionality. Don't just worry about this width or this width, worry about everything in between as well. So that takes care of everything that we needed to do for our first panel. Now we are ready to move on to the typography panels. So that's panel two, three, four, and five. So you're gonna go through, set up these panels, set up their backgrounds. And get all the topography in place. So we'll take care of that in the next lesson. I'll see you there.