2.5 Responsive CSS
You now have your base layout complete, but you still need to make sure it will look great on any screen and viewport size. In this lesson, learn how to make your layout responsive by adding media queries and a few extra tweaks.
2.5 Responsive CSS
Hey, welcome to the final lesson of Start Here, Learn CSS Layout. Your layout is almost complete but in this lesson we gonna make it responsive. So we're gonna make sure that it looks good everywhere in between here at its widest and here at its narrowest. Now, the general process that you wanna follow when you're making your site responsive is to just gradually decrease the width of the view port. And every time that the layout starts to look wrong, or starts to look broken, you add in some code to correct it and make it look good again. And we do that by adding what's called break points, or media queries. Now, these are a way to detect when a viewport is at a certain width and then to adjust your layout at that width only. Now as we shrink down our browser window, the first time it will hit a point that the layout starts to look wrong is when we start to close the browser viewport in onto the borders of our wrapper here. What we wanna do is add a little spacing into the left and right right sides when we're at this width, so that I wrapped up isn't just smooshed up against the edges of the viewport. So we're gonna do this with the video zoomed out a little bit more than it usually is, because the width at which we need to make this first change will be too wide for you to see otherwise. Now, what we wanna do is add some spacing of 2.5 rem on the left and right sides, at the point at which we would otherwise start crushing in on those borders. And the way we're gonna figure out where our break point should be is by adding the amount of spacing that we wanna add in to the width of our wrapper, which is 80 rem. So when we reach a point of 85 rem, which will account for the width of our wrapper plus the padding, then we're gonna make it our change. And the way that we do that is by adding a media query. So first, we're gonna add @media and this is how we let the browser know that we're about to start a media query. Then we're gonna make a pair of brackets, and in between the brackets we're going to tell the browser at what width we want this media query to take effect. And we only want it to affect our browser up to a maximum width of 85 rem. So, in between the brackets we'll add max width 85 rem. Now we're gonna add some curly brackets. And then in between the curly brackets, we're gonna make our adjustment. Now we wanna target the body element, and we wanna give it some extra padding on the left and right sides of this width. So add in body and we're creating a new style to target the body. And then we're gonna set our padding. We don't wanna change the padding at the top and bottom of the body, so we'll set the first value to 0, and then for the left and right sides, we'll set 2.5 rem. And there we go, so now we've got some nice spacing on the left and right sides. And that spacing will kick in when we get to about here. Now, watch for a little jump in the layout. There you go. Did you see that little change there, just a little shift? That is the media query kicking in and adding in that padding to the body. All right now, just quickly zoom in again, so it's a little bit easier for you to see what I'm doing. All right, so the next thing we're gonna deal with is our columns. Right now, as we start to crunch down the browser window, you get to a point where there's really not enough space to have two columns side by side. And we're gonna choose what point we want to collapse down to a single column layout, so our side will sit below our main section. And a little tip. If you activate the Chrome dev tools, then as you adjust your browser window size, you get a little readout in the top right corner that will tell you the width of your viewport. So, I think that the point at which we need to collapse our layer down is around about 960 pixels. So that's about the last point at which it still looks okay having those two columns. Now, we're gonna convert 960 pixels to a rem value. The way we do that is by taking the value of 960 and dividing it by 16, which is the most common default browser font size. And that gives us 60 rem. So now we know that when we hit 60 rem, we wanna collapse down to a single column layout. So we just copy this last media query, speed things along a little bit and now we change that to 60 rem. Now we're gonna target both of our columns. So we add in both their classes, and you remember from our alignment lesson, that the reason we have these two columns is we're floating them, we're floating one to the left and one to the right. So now we're gonna override that floating behavior by sitting float to none, so now that will remove that floating behavior. So our side is now down the bottom and our section is at the top. But obviously right now, the columns are too thin, so we're gonna fix that by changing the width of both of them to 100%. All right, so now our top section looks right, and our side section almost looks right. It's still not quite there, though, because we still have this padding on the left. So we're going to make a new style to apply just to our second column, and here we're gonna get rid of that padding on the left by adding padding-left: 0. All right, so now that looks a lot better. But now, we have far to smaller gap in between the section and the aside. You can't tell that they're two separate pieces of content. So to remedy that, we're gonna add some padding to the top of our side. So we'll add padding-top, and we'll set that to 4rem. All right, so now our single column now is looking really good. Now we're gonna check to see that everything looks good in between this width and full width, and I think that right now, as we start coming down to the break point where we go to a single column. We probably have a little bit too much spacing in our layout. So now, we're gonna gradually shrink the spacing down in between this point right before we collapse to a single column layout and this point which is our widest point with our layout. So we're gonna take the amount of padding that we using down by 0.5 rems every five rem of width. So first, let's put in a media query at 80 rem. So, we'll just Copy and Paste, it makes it a little quicker. We change that to 80 rem. Now, we're gonna reduce the padding inside the wrapper first. So we'll add in a new style for our wrapper. And then we'll set padding down from 5 rem to 4.5 rem, and we'll also need to set the padding in between the columns to the same amount. So we'll add a new .col_ 02 style, and in there, we'll set padding-left to 4.5 rem. Now we're gonna repeat this a couple of times, so we just Copy and Paste. Change the media query here to 75, we'll drop this by 0.5 rem. So we have 4 rem for each. Copy and Paste again. Change this down to 70 rem. And change our spacing amount to 3.5. And then one more time. Change that to 65 rem. And we change the spacing down to 3 rem. So now, when we start at our wider layout you'll see the spacing gradually increase. As we get thinner and thinner. So that's just very smooth and allows us to take better advantage of the available space as our layout becomes thinner. Now, you'll notice that when we're back down to our single column layout, the spacing has reduced down again. And that's because the last media query that set padding on our wrapper was this one. And in this media query, we told the browser to apply this padding at any width up to 65 rem. So now, to bring that back up again in our 60 rem media query, where we're crunching down to a single column layout. We're gonna add another wrapper class and we're gonna bring the padding back up. By copying this wrapper style and now we'll just change that 4. All right, and then that's put our padding back up again. But we still want to keep gradually shrinking it as we get smaller and smaller from here again. So now, we'll add another media query. This time it'll be at 55 rem. And we'll drop the padding down to 3.5. We'll have another one at 45 rem and we'll drop it down to 3. And then the last one will be at 35 rem and we'll drop it down to 2.5. So now, we have a smoothly decreasing amount of spacing in our two column layout, and then we do the same thing again in a single column layout. As the viewport gets smaller and there's less space to work with. And then on top of that, to help us maximize the space that we have available, we're going to remove the body padding that we added to create this spacing on the left and right of our wrapper. And we'll do that when we're really starting to get quite a small amount of space to work with at the 45 rem breakpoint. So in here, we'll add our body selector. And we'll set the padding back to 0. So now, we've almost handled everything that we need to, things are looking pretty good. Our layout is responding well and it's handling the change in viewport size well. However, as we get smaller, right now the text is really, it's just a little bit too chunky. It's just a little bit too big and unwieldy for this amount of space. So what we're gonna do is tweak the text. Now, if you remember from our course on typography, we briefly touched on the VW unit which allows you to size things based on the viewport width. And combining the VW unit with media queries can really simplify the process of creating responsive text. So up in our 60 rem media query. We're gonna add an h1 selector and in it we're gonna set the front size to 5.6vw. So that is 5.6% of the viewport width. Then we'll also add an h2 selector. And then this, we'll set the font size to 3.9vw. Now, let's look at the effect. When we've reached 60 rem, which is when we go into a single column layout. Now, instead being a fixed size our text is relative to the width of the viewport. So as we shrink our viewport down, you'll see the size of the text shrinking too. So that way, you never end up with text that is too large for the window. So that's almost perfect for our text, but it does get a little bit too small at the smallest width. We don't want any of our headings to become smaller than the main text. And we still want our main headlines to look pretty significant. So at the 45 rem media query, we're still going to use the VW unit on our headings but we're gonna increase them a little bit. So we'll actually just copy this code. Paste it into our 45 rem breakpoint, and we'll change this to 6.5 for the h1 selector and 5 for the h2. So that's bumped that up a little bit. And now, when we hit the single column layout we have a really nice text size no matter what width we go to. And the same thing applies for our h3. We have a really nice smoothly decreasing text size. That still keeps it large enough to be suitable for a heading. All right, so that's now all the CSS done that you need to have in place to convert your layout into a fully responsive layout. But there's still one more step that you need to complete before this is properly responsive, and that is in your HTML. Now, sometimes on mobile devices the system will try to help improve the legibility of a site by altering the zoom level or the width that a site will show up as. Now we wanna make sure that that doesn't happen because we are fully catered for any possible width that our site might be viewed at. So we're gonna add a meta element into our head that will tell the browser it doesn't need to modify the width of the site or the scale or zoom level. It can just load it up as it is. And that meta tag looks like this. So we have the name attribute set to viewport. And then in the content attribute, we're saying the width of our site should just be set to whatever the width of the device is. And that our site's initial scale should be 1. So that's a 1 to 1 zoom level. In other words, just load the site up as it is. So whenever you're working on a responsive design, if you check it on a mobile device and it doesn't look right, then make sure that you've remembered to add this meta tag into your head section. All right, now let's zoom this video out and take a look at what we've done. So as we shrink things down, you can see that we've got a really nice fluidly changing layout that keeps our content looking highly legible and readable. And everything is adjusting no matter what size the viewport is. And you'll also notice that the logo and the image are both shrinking, so neither one is ever too large for the space. And that's because of the max width that we applied to the image earlier on. All right, so that's it. You've now fully completed your layout. Please join me in the final video of this course. We're just going to quickly recap everything that you've learned. And I'll let you know what you'll be learning in the next course. We move on to adding backgrounds and coloring to our site. So I'll see you in the final video.