Final Flexbox Solution

[00:00:00]
>> Well, I hope you did well with the popular prints. Let's go through how this is gonna wind up working out here the way that I coded it. So starting with the HTML, I'm around line 44 in the HTML, and I start with a div with a class of stripe, and that will wind up being the green stripe that goes all the way across from edge to edge.

[00:00:20]
We've done this now this is the third time we've done that we did it earlier with the footer and then we did it with the header and in the navigation now we're gonna do it this time with the big green stripe going across the page. Then we have our section with an ID of popular cuz it's popular prints and we have our series of figures and figure captions inside of an unordered list so basically the HTML is nothing you haven't seen before to this point in time.

[00:00:46]
Now we'll take a look at the CSS. Starting here I'm around line 188 in the ending CSS, as it says here. Here's the green stripe for the popular images. As we've done before, we have our stripe, it has a background colour this case it's colour two. Text was a white color and we put a little bit of padding on it, so it's not running into the edges of the webpage.

[00:01:10]
And then, Because we don't set our Flexbox in the mobile portion of the webpage, that's all it's there outside of the media queries. Let's go down inside the media queries and see what we did here. So here's the big trick. We're gonna start with a tablet, this is around line 327 inside of the CSS.

[00:01:30]
And so what you see here is I have, inside of the popular ID of popular the li last child. We're gonna set its flex basis to a hundred percent stretch it all the way across the screen. Otherwise the style right before it here where it says section li, its flex basis is set to 49.5% and that will take effect because we've written really nice efficient HTML and been consistent in how we wrote our HTML through this document.

[00:02:02]
Our HTML will pick up that particular style and set those first two images on top at you know roughly half the screen and then we'll say the last child we want it to stretch to be 100% so that's how we get the two on the top and the one big one underneath.

[00:02:18]
The problem is with that particular image of the scooter when you go to that wide format, you'll see the top part of the picture, which is not the interesting part. We're really interested in the scooter right. So you'll see the wallpaper and you'll see things hanging on the wall and stuff which is lovely but It's better if we see the bottom of the picture.

[00:02:39]
So we'll take advantage of that object position property again and just playing around with numbers and so forth I found that zero negative 350 pixels, moved up that image enough so that we could see some of the scooter and have more of a sense of why it was called let's scoot.

[00:02:59]
So that's why I did that. And then finally, let's go down to the bottom here inside of our media query for the desktop And so as I have mentioned to you before you have to think about what you need to turn off. So right now we have two of those LI's that are have a width of about half.

[00:03:22]
We have one that has a width of about 100%. We need to change all of that. So here on line 380, the section LI and popular LI last child. You need all of that in order to override what comes before. We said that flexspaces to about a third.

[00:03:42]
And then finally down at the bottom that last figure we reset the object position property back to zero again so that the image doesn't completely scroll off the screen and we have a great big huge gaping hole. We put the picture back down into the frame appropriately.