FREELessons: 7Length: 47 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Responsive Considerations

Our website now looks good on a large monitor. But with a site like this, you will need to spend some time making it look good in smaller browsers. In this lesson, I will point you in the right direction as I show you one potential solution for displaying the first section of the page in a smaller browser.

2.5 Responsive Considerations

In a short course like this, I just don't have the time to show you how to do every little thing that we've done in this site. For example, I don't have time to walk you through what it would take to make this site fully responsive. But I do want to at least point you in the right direction on how to get started making this responsive. If we didn't build any responsiveness into this site at all, then it's gonna look really weird once you start changing the browser size, once you start making it a smaller browser. So once you start thinking about responsiveness, you need to start deciding what parts of your page can go, what parts of your page can be completely removed, or what can be resized in order to make everything fit. For example, once things start getting smaller, this text is no longer going to fit in this area, especially if this area is getting smaller as well. The text will start stretching downwards, and it'll start overlapping the image below it. And it's just not gonna look good. So, once you start making this responsive, you need to make all kinds of decisions as far as what you can keep, what you can resize, and things like that. So I have taken the liberty of getting you started on making this more responsive by basically cutting out this top section and basically just the background image for this top section when we get below 1,000 pixels in width. Because once we get below 1,000 pixels, that's when our container here is going to start resizing and getting smaller. So what I've done is you'll notice that as we get to the point where the container starts shrinking, you'll see that the buffalo images disappear entirely. Now obviously you can spend a little more effort making this top row here a little more attractive. Maybe putting a little less space at the top and bottom there, but you can make those decisions for yourself. You'll notice I've moved this fall lookbook text down, so that it's no longer hovering over the first section. Instead it's only over the second section. And the second section is now taking up the full width. So that gives our text a lot more room to work with. Now that's as far as I've taken it. If you scroll down further, you're gonna see that a lot of things are broken. This section here needs to be moved back down, so that the links over here on the left are over a white background, instead of over this image. So a lot of things still need to be changed and moved around. But a lot of this still looks okay at this size. But once you get to smaller and smaller sizes, you're gonna have to make decisions about what you can get rid of, what you can resize and move around. And it's as easy, if we jump into our CSS, as creating a few media queries. So if we come down here to the very bottom, I've created a media query for a max-width of 1,020 pixels. And so you can see here that the section1-bg, which is the element that had the background image of the buffalo in it, as well as the section2-skier, both of those elements have been set to a display of none. So both of those elements simply just disappear when we get below a maximum width of 1,020 pixels. And it's important to point out that you can also change the layout of your site when you get inside these media queries. You can change the column and row that a particular element starts in, and you can change the span of that column or of that element. You can change the number of rows and columns that that elements spans. You can even go into that section container and change the widths and heights of all of those columns and rows. So, you can do anything inside these media queries. So you can completely redefine your grid layout in these media queries in order to work at different sizes. I've simply taken the liberty of doing something very simple here just to show you how it's done. So I want to challenge you to take what you see here. This is how you're really gonna learn, by taking something and doing it yourself instead of just watching me do it. So I want to challenge you to take this media query, maybe start over with it, if you don't like what I've done so far with it. But start creating some media queries and make the site look better at different browser sizes. And then start resizing your browser, and once you get to a point where it looks bad again, then create another media query for that size. And start making that browser size work with your design. So again, I want to challenge you to do that. That's how you're really gonna learn this stuff, and hopefully you can come up with some really nice looking solutions. So thank you for watching, and I'll see you in the next video.

Back to the top