Desktop Layout Exercise

[00:00:00]
>> So let's try one more of these. So now what I'd like for you to do is to write the media query for 900 pixels and larger, and you want to make the screen look like this. Okay, 900 pixels and larger. So tell me about the layout that you see here.

[00:00:18]
How many columns are we going to need to layout this web page?
>> Three.
>> We need three columns probably of equal sizes. How many rows are we going to need in order to layout this web page?
>> Four.
>> Four, right? One, two, three, and four, okay?

[00:00:36]
So what I'd like for you to do right now is I want you to see if you can just lay out the cards in this larger arrangement here, don't worry about the layout inside of the card. If you have time, you're welcome to work on that as well because that has changed.

[00:00:52]
But for right now, just see if you can achieve the cards in all of those places and we'll worry about the layout inside of the card here in just a moment, okay? All right, so hopefully you got that layout. The cards may not be perfectly formatted, but at least you got them in the right spots inside of our grid.

[00:01:12]
Let's see how we did. So what do I need to put here in my code to make this happen?
>> @media.
>> @media and?
>> Min-width 900.
>> Min-width:900pixels. Awesome, okay? Great start. Now, what?
>> Grid template columns.
>> Okay, and that goes with a selector.
>> For card container.

[00:01:38]
>> Yeah, card container, all right.
>> We got three columns.
>> Okay, grid template columns and what are your numbers this time?
>> I want 1fr, 1fr 1fr.
>> Okay, so repeat 3, 1fr, awesome. What else? So we've still got that going on. What else needs to change here in order to make this layout happen?

[00:02:14]
>> We need to have the feature column or feature class. Take up the first two columns and then the first three rows.
>> Okay, so if we have our feature take up the first two of the three columns, that leaves room for the cards to move up here into the other column, right?

[00:02:40]
And there's three of them, there they are. Formatting's all wrong, makes the featured card look kinda silly, but that's okay, we'll fix that. And then we've got our three cards here across the bottom. Nice, that's exactly it, all right? Now, we already have our grid template columns of 3, 1fr.

[00:03:01]
We actually have that here inside of our min width media query of 700 pixels, right? So that actually carries over just fine into our 900 pixel media query. We don't have to repeat it. If you want to repeat it, you can, but you do not need to repeat it.

[00:03:17]
And I actually added a couple of other extra things here just for fun. I said the max-width of our card container would be 1200 pixels, just because otherwise it continues to expand until forever, right? So let's put a little barrier on it. And then when it gets more than 1200 pixels, we can say margin: 0 auto, and that will center it in space.

[00:03:44]
So it will only get so wide. And again, that's an art direction kind of thing. It's that is neither here nor there for the functioning of the design. Okay, fantastic. So let's now work through the formatting of these cards. So we have everything stacked currently, but what we need is we need to have them side by side again.

[00:04:07]
Does that layout look familiar to you? Kind of like that layout? Okay, so maybe it's exactly the same layout at our desktop dimension. Wow, that's pretty tricky, okay? So if we go back to our mobile format here, what would happen if we just kinda copy what we have here for card?

[00:04:37]
And what if we just drag it on into our 900 pixel media query, just copy it and paste it. Does that get us pretty close? Pretty close, pretty close. Okay, so we need a few tweaks to what we have there. And what I'm going to do is the following.

[00:04:59]
We're gonna say our grid template columns, rather than 3 and 1, we're gonna just say 1 and 1. We want that image a little bit bigger. The gap, I'm gonna give it a little bit of gap, 1rem, we're at a bigger dimension, so that is a good thing to do.

[00:05:19]
We don't need the border anymore because the border is already carrying in from before so we're just repeating ourselves there. We don't need the padding at 3rem 0 because that's just giving us too much space here on the top and bottom of this card. So I'm just gonna change this to 1rem overall.

[00:05:41]
1 is a little bit prettier, okay? And then right now we have our align items set to center, meaning that the Earth and Moon and the button are all centered on that image. I'm gonna change this to stretch, not gonna do a whole lot here for us but it'll allow things to stretch a little bit more and give us a little bit more space hopefully for this button.

[00:06:10]
We're gonna continue to address things here. Okay, feature broke when we brought in that card layout. Why did that happen?
>> So we're displaying the future now with the same properties of that card. So it has the grid and-
>> Exactly, because our featured item has both a class of feature and card, this card style is applying here to my feature item.

[00:06:41]
So I am actually just going to cut and paste my feature class to come after the card, because I'm gonna add to the style. And I'm going to say, for the featured card, display: block. Because that actually is still the style that I want here. So my one card will display block.

[00:07:01]
My other cards are going to display in some kind of grid format. Okay, and then I think the only other thing that I have to do here is say .card a. And I'm going to make my font size 0.7rem, okay. Maybe I need to tweak my media query size too.

[00:07:25]
Is this working for you guys at 900, or are all those buttons wrapping? All the buttons are wrapping. Okay, so maybe we need to tweak our media query to where the buttons don't wrap anymore. Maybe we need to make it 950. So we'll make this a min-width of 950, and that'll fix that problem too.

[00:07:47]
We'll go from our cards like this at 949 to our cards like this at 950. How's that? Now the only other thing we might wanna do is and I don't think I can make my screen big enough. So I'm gonna just kind of zoom out on my browser a little bit.

[00:08:08]
What's happening here with my h1? What's going on with that when I get to really big screen sizes, anyone have any idea?
>> Still left justified against the whole screen.
>> It is left justified against the whole screen and I have set my card container to have a max-width of 1200 pixels, but the h1 is not inside of the card container, right?

[00:08:31]
What would happen if I moved my h1 inside of the card container? Would that work?
>> Would that be justified with the cards?
>> It should be justified with the cards, right? So if I take my h1 and I put it inside of my card container, whoops. Not like that.

[00:08:49]
>> Too inside.
>> Very, very inside there. There we go. I put it inside the card container like that. What happens?
>> It disappeared.
>> Actually, it didn't disappear, what happened?
>> Just went over to the right.
>> It's behind it.
>> It's right here [LAUGH] great reaction.

[00:09:07]
Yes, what just happened? Can anyone explain what just happened?
>> Our feature's overriding it.
>> The feature card, we told it to display starting in line number one, so it still is, right? What is h1 being treated like?
>> The next element.
>> It's a child of the card container, right?

[00:09:31]
And so it's being treated just like a card. If you like it, you can keep it, but it's not what the designer said. Yeah, so we can't really put this inside of card container and that's why. That is not a bug. That's a feature, right? h1 is a child of card container just like everything else.

[00:09:47]
So it's doing exactly what you told it to do. Don't you hate it when that happens? Yeah, okay, so we'll take that h1 back out of the card container. We need to do something else with its styling. So what I did here is I just added, still inside of my 950 pixel media query, I'm just gonna add another h1 style.

[00:10:10]
And I'll set its max-width to 1200 pixels. And I'll set its margin. Actually I did a little bit different here, I said 3rem 0 2rem auto. Sorry, 3 rem auto, 2 rem auto. Now when you have four numbers like this, what does that mean?
>> Trouble.
>> Trouble, awesome.

[00:10:36]
You're the first person to ever say it. I love it. Okay, so how you remember what these four numbers are? They are top, right, bottom, and left. And if you can remember that you'll stay out of trouble, T-R-B-L, yeah? Top, right, bottom, left. The other way people do this is like a clock, the hands on a clock.

[00:11:07]
You start at 12, you go 3, 6, and 9. Top, right, bottom, left. So if you're a visual person, that works as well. Doesn't work for me, this is what works for me. Okay, so now that we fixed that little bug so that the headline is in line with everything else and it doesn't act like a card.

[00:11:28]
Let me zoom back in. We should be all set here with our layout. It was a lot, right? But you see how those core grid concepts that we learned right at the beginning of the workshop are carrying on here into more and more complicated designs. We just continue to iterate.