Team: Tablet & Desktop Layouts

[00:00:00]
>> I want you to create the tablet layout and the desktop layout. And so all that there is here to think about is what? We've got the hard part of the styling done, right? And these are all stacked on top of each other. So as we move to tablet and we move to desktop, what do we need to think about here inside of our web page?

[00:00:25]
>> Grids.
>> We have a bunch of figures here, right? We need to think about putting those figures two across or three across. So if you don't have one, you're going to need to add a parent to all those figures. I've called mine a div with a class of team.

[00:00:45]
That will be the parent for your layout. Then all of the individual figures will serve as the children. And you should be able to write two media queries that are going to give you two across or three across. And those breakpoints are at, 675 and 1000, so we're going to have media queries after this.

[00:01:13]
So @media (min-width:, 675px). Okay, and then we're going to have the same thing right after that for 1000 pixels. Okay, sound good? You can do this in three styles. You can do this in three styles. All right, so the end of this team challenge is actually not that difficult.

[00:01:59]
This is a pretty straightforward two column versus three column grid system. We don't need to change anything with the figures that took a lot of time to lay out in the mobile design, so let's go through that now. So here at 675 pixels, this is where we wanna have two people across on the page.

[00:02:20]
So we can add some additional styling here. My fancy text is gonna get a bit bigger, font-size: var(--xl). And then, in case you missed it, I did put a div with a class of team around all of my figures. I'm going to need that in order to do, whether I do Flexbox or grid, we need to have a container around all of those items inside.

[00:02:51]
So we have our parent child relationship, and now what we'll do is set up our team style. And we just say display: grid. And then grid-template-columns: 1fr 1fr, and we can set up a gap of 2 rem. So a little bit of space in between all of those.

[00:03:29]
And if we need a little bit of space on the top of the page, it looks like we might. I can always add a bit of margin, like 3 rem auto, kinda like that. I'll push this down the page, off the top there a little bit. And give us a little space down here at the bottom.

[00:03:46]
So that would be something else you could do. And that's it, there you go, you got your two across for your team here on this page. And then the last part is for our 1000 pixel wide breakpoint. All we have to do is change the number of columns.

[00:04:03]
So for .team, We'll say grid-template-columns is repeat(3,1fr). So when I make the screens wider, then we'll wind up with three across. Everything else carries down from the previous breakpoint. So we are all set there with that team. In fact, now I'm looking at this, I'm looking at this on mobile, it looks like I need the space here.

[00:04:39]
So I can shift that space, I assigned it here inside of the media query to the team style. I can go outside the media query, create a team style here, and apply that 3 rems outside of the media query. And now I've got it there across all of my breakpoints.

[00:04:59]
Yeah, that's a little bit better. Okay. So super fun, questions on that? Fantastic, yes.
>> One question about the positioning or the order of the CSS.
>> Yeah.
>> Can you explain one more time why the last of type and only type rule has to be first?
>> First, right?

[00:05:27]
Okay, so we can have one, two, or three icons. So the one that we want to have, if we only have one icon, that one icon can be addressed by actually three selectors. One single icon, could be the first-of-type, the last-of-type, or the only-of-type, [LAUGH] any of those.

[00:05:52]
In which case, we have no idea where it's going to wind up going. So that winds up being our first one because it has the only-of-type, that will be our first one here. If we have two, we have that position of that first icon, whether it's, I guess, in that case, it would be the first-of-type, the last-of-type.

[00:06:15]
So we have two and a last-of-type in that particular case. We don't have the first-of-type, the first-of-type winds up being an exception. The reason it's kind of backwards is because we have one icon here is the anchor. This one icon in the lower part cuz that's what the design said, is our anchor for all of the other ones.

[00:06:36]
And so that has to be our last-of-type, or the only-of-type, all of those kinds of things. So the first-of-type up here is only gonna show up if there happen to be three icons. Right, okay, I got a good response over here.
>> So the numbers, so 55, 5, even though that was what you were typing when the first one showed up, that's actually the coordinates of the highest one?

[00:07:07]
>> It winds up being up here, yep. And then, of course, the middle one winds up being in the middle. So if we have two of them, it will be position one and two. And if we have three of them, two is still in that same spot before we add the last one.

[00:07:22]
So that's why we had to shift these around in this odd order. Because they all have more or less the same specificity and they override each other. And so that was another consideration as I put this together, because I needed to have things overridden in a very specific way.

[00:07:39]
So first-of-type winds up being the last one on the list. So, great question, I'm so glad you asked that.