Advanced Desktop Layout

[00:00:00]
>> The very very last thing we need to do now with our design is to set up our desktop break point. So to remind you what these look like we've got our mobile is under control. It's over on the right hand side. We've got our tablet under control there in the middle.

[00:00:15]
Now we need to worry about our layout over there on the left hand side. And as you see here, we have a nav bar, we have our album cover, our audio, our reviews. Then over on the right column we have our advertising boxes, our diamonds, and all of the other small elements, and then the footer has wound up being over on the left again.

[00:00:43]
So when we look at a type of layout kind of like that, we need to start thinking about how do we group together these elements such that we can lay everything out for desktop. So let's put that together now. If we take a look at our HTML at a very, very high level.

[00:01:00]
We have a div with a class of wrapper around everything, as you know. Then we have our header, our main grid. Remember, main grid contains our cover and our track list are contained inside of that main grid. And the cover includes the cover and the audio player. We have our side of reviews.

[00:01:21]
That's another element that we have there. We have our album Magenta Lime, that's the box with the guys in it. We have our diamond box, and then I've called this thing just CTA as in call to action. That's all the extra little stuff down there at the bottom, the buttons, the lightning bolts, the and so forth.

[00:01:42]
All the other little small stuff. And then we have the footer. So let's put in some groupings here. It's not going to break any of our layouts that have come before, but let's put in some groupings now, that will help us with our desktop based layout. So I am going to group together these elements with just an old div, because we're not adding anything semantically here.

[00:02:04]
We just need something to hold a class. So I'm going to say here at the very first one, we're gonna say div with a class of left, because it's gonna go on the left. And inside this div I am going to put in a header, a main grid and my reviews, because that will show up on the left hand side of our layout/div.

[00:02:36]
Then I'm going to put in another div with a class of right. And this div is going to include our boxes, our diamond images, and all of the other small elements. And then we have the footer by itself. So basically we have a wrapper, it has three children, has div with a class of left, div with a class of right and footer, that's all we've got.

[00:03:10]
So now we have our div with a class of wrapper all the way around the outside. We have a div with a class of left, a div with a class of right, and our footer. So now all we have to do is write our grid-based layout for this.

[00:03:23]
I'm just gonna add this to the bottom of the page because this is a general page layout that is going to apply everywhere. It's not really associated with any of our layers such as they are. So I'm just gonna put this down here in our last media query, which is a desktop based media query here.

[00:03:42]
So the first thing that I'm going to do is turn this into a minimum width of 1440, which is a number that came to us from the designer. So we have our wrapper set to a maximum width of 1440 as well, and now we can say display grid, and we can say our grid template columns, I kinda want a 60 40 split in terms of the sizing here.

[00:04:13]
In other words, not two evenly sized columns. I want the left side to be slightly larger than the right hand side, so I'm going to use 6fr, 4fr, to do that. Then we can set up a bunch of other styles here for this. Remember that we had some classes earlier called Hide Tablet and Hide Mobile.

[00:04:45]
These are up in the reviews, and I think we've probably already declared these in the reviews. I'm gonna re-declare them here again so that we get a very clear picture as to what's going on at our desktop dimension. So we'll say display block, we want those little lightning bolts in between the reviews to show up.

[00:05:04]
Then we can say left. We're gonna have to give this a very specific place for it to appear, because when we make this screen big enough. And mine will not go big enough. We wanna be sure to have all of our elements show up here. And what's gonna happen right now is our footer will wind up showing up all the way down here at the bottom.

[00:05:34]
And we actually want our footer to show up more in this area here, with this right column going long down here on the side. So, I'm going to call out my grid column. So 1/2 and my grid-row, so 1/2. Because we want everything that's there on the left, we want it to take up our first column, and we want it to take up our first row.

[00:06:14]
Likewise for our right side, we want that to take up our grid-column of 2/3. So we want that to take up the next column and grid-row, we want that to take up 1/3. So we want it to occupy the row that will have all of left and it will occupy the row that will contain our footer.

[00:06:42]
In addition, because that last button that we have over there in that right column doesn't necessarily have any margin associated with it, let's give it a little bit of margin there. Margin-bottom of 5rem, that way it doesn't crash into the very bottom of the browser. And then finally, we can specify where we want our footer to appear.

[00:07:04]
Footer, and we're gonna say our grid column is 1/2, so it's over on the left column. We want our grid row to be 2/3, so it'll appear underneath of that left column. We don't want it to overlap it. We want it to appear underneath. And then we can control exactly where we want it to appear via margin.

[00:07:30]
So let's just check how this looks so far. So as we scroll down here, here's the footer down here at the bottom, and it is showing up in the second row but it still kinda got a large gap here. So we can convince it to display a little bit higher using negative margin.

[00:08:00]
And I'll do that by adding a margin on the top of -20 rem, and that was derived just by trial and error. So now, when we take a look at this again, That will pull the footer up a little bit closer to the reviews and give us a little bit of that extra space over here on the side for the additional items that are in the right hand column.

[00:08:29]
Now the other problem that we have here is our navigation bar. You'll see that our navigation bar is crashing into our right column here. And so we might need to tweak this a little bit to make this work a little bit better. If we go back into our nav styling here, we have a style for top, And it has no maximum width associated with it.

[00:09:11]
So let's give it a max width of 600 pixels. And now when we go back to the way this page looks Now our navigation is aligned a little bit better over our cover. It doesn't smash into the side here on desktop. And it continues to look okay here on tablet although now it's up a little bit here on the tablet, so we can add some more styling on that.

[00:09:43]
So here in the top UL, we can give this a gap of one rem instead of two rem. And for the margin, let's change that to a margin of 0.5 rem 0 0 0. And that will push that navigation bar into better alignment here so that it's not off anymore.

[00:10:07]
So now as we make our page bigger, the desktop layout looks great. As we make our page smaller, we still have our working track list. The navigation looks good. Until we get to our mobile dimensions, there's our button. Get a little further and the name disappears. So there we are.

[00:10:31]
We are all done with our more challenging design.