(jingle) - [Instructor] For this challenge, your job was to take a fixed width website that was laid out using floats, and write new CSS to create a responsive website using flexbox. The first thing we're gonna do is open the file again in a separate browser tap. This way, we have our working page, but we can also load back and look at the original if we need to remember what it looks like. Next, we're going to go into the CSS that's in our HTML file starting with line nine and delete all of the CSS, because we're not going to need any of it.
So, I've deleted everything between the two style tags right here. Normally, when we're laying out a webpage, we would start from the narrow layout first, as it's usually easier, but for this, since we're recreating an existing layout for the wide viewports, we're going to start with that one first. So, I'm going to save, and then go here and refresh. So now, I don't have any layout styles on the page. Looking at the page, it seems like the best approach is to create two different flex containers, one at the top for the two images in the heading, and another at the bottom for the content in the links box.
Looking at the HTML, the images and heading are all inside the header element, and then the content and links are all within the div, which has a container class. Those will be our two flex containers. I'm going into the style now, and this is at line nine. For the header, I'm going to give it a display of flex to make it a flex box, and that already gets us started in the right direction. Going back to refresh the page, now we have the two images and the title all in a row.
We want the images to go on either side of the heading, and we can use the order property to change the order of the three elements. By adding more CSS, image1 should go on the left, so we're going to give it an order of negative one to go before the heading, which has a default order of zero. I'm typing image1, and then an order of negative one, and then image2 should go to the right, so we're going to give it an order of one. So, image2, and then order of one, and save, and refresh.
So now, I have the three items in the correct order. So, we just need to get the second image all the way over to the right, and then the heading right in the middle of the page. We can space out the three flex items using justify content. Space-between will put space between them, but not at the ends, so in the CSS, I'm going to add another style to the header element, so on line 11, I'm going to add justify-content, space-between, and save, and go back to my page and refresh.
So, now I have everything along the top all spaced out how I want it. Next, going back to the code, I'm going to make the container div a flex container. So, on line 19, container, and then display flex, save, refresh, so now they're right next to each other, but we wanna make the links box wide enough so that the links will fit on one line. Basically, you just need to try out different widths until you find one that looks nice.
250 pixels works pretty good for this layout, so I'm gonna add on line 22 for the links class, I'm gonna give it a minimum width of 250 pixels and save and refresh. So, looking back at the original layout, our links box needs to go on the right. We can do that with order. The default order for an element is zero. If we give the links section a one, it will go to the right of the content section.
On line 24, on my code, I'm going to add order colon one for the links, save, and refresh. Now, our layout looks pretty good at the widest screen width. Looking back to the original, it looks very similar. The only difference is that the green box actually goes to the bottom of the page, which is fine, and actually looks a little better than the original. When we make this narrower, it looks good for a little while, but if we go down to a really narrow screen size, this isn't a good layout anymore.
Let's look at the header first instead of the whole page all at once. As we go narrower, it looks good to around maybe 500 pixels or so. We're going to add a media query there and make some changes. Going on line 26 @media in parenthesis max-width 500 pixels. We're using max-width to target everything below a maximum of 500 pixels in width. The first thing we're going to try out is to use flex-wrap so that those three things aren't all on one line, so inside this media query, for the header element, I'm going to add a style of flex-wrap wrap and save, go back here, and refresh.
I think we're a little more than 500 pixels. When we cross to less than 500 pixels, they're no longer all on one line. Now, let's see if we can find a way to put the images together on one line, and a heading on a line all by itself. First, we're going to move the heading to the top so the images are next to each other. So, inside this media query, for h1, I'm gonna give it an order of negative three. Save, go back and refresh, now the heading's at the top, and the images are right next to each other.
That looks pretty good, but if we go even narrower, the images will wrap onto multiple lines. It would be better to keep them on one line so you don't have to scroll so much. You can actually use max-width for this. Earlier, we talked about using max-width with 100% for images, so they never expand outside their containing element. Here, we wanna tell the browser that these two particular elements should never be more than half the width of their container, so they will always fit on the same line. Keep in mind, this is all within a media query, so it doesn't apply when we have the layout for wider screen width.
Back in my CSS on line 33, still in the media query, for image1 and also for image2, we're gonna give them max-width of 48%, and I'm making it 48% so there's a little space between them, so save, go back and refresh, and now they're always going to be on the same line as long as we're within that media query. Once we go to the wider with, then they go back to what we started them out as.
So now, we're going to look at our content and links sections. They look fine at this wider viewport width, but when we get to around 750 pixels, they start to look squished. This would be a good point to have the links section go down to the bottom, below the content. So, let's add another media query. Going back to the code, I'm going to go down to line 37. I'm going to make sure that I'm after the previous media query to @media, then max-width 750 pixels, and then inside the media query, we're gonna wrap the two flex items onto separate lines instead of having them shrink, so we're gonna take the container element and set the flex-wrap to wrap, save, go back and refresh.
Now, with this narrower viewport width, they're on separate lines. The last thing we wanna do is have this links section go all the way across. We can do that by giving it a width of 100%. One more inside the media query, the links class, and then a width of 100%, and then save and refresh. Keep in mind that it's in the media query so that width only applies when it's wrapped onto its own row.
And now, looking at our layout, it ends up looking pretty good in every viewport width.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox