Featured Card Exercise

[00:00:00]
>> So our first card has different behaviors through these break points, so we wanna set up styles for it as a featured card. The featured card actually never changes layout once it's initially set. Okay, so if we look again on our demo, look at the layout of our featured card here, let me make it small, okay?

[00:00:23]
So we have picture, headline, text, button. As I make this bigger, the rest of the page is changing, but look at this featured item. It's not changing at all, is it? It stays exactly the same the entire time. Everybody see that? Cool? We didn't realize that was happening, because we were thinking about media queries.

[00:00:51]
We were not thinking about how each card is behaving. Now what I would like for you to do is take that featured card, and I would like you to try to write some container queries reflecting the fact that this design never changes, okay? And I'll show you my answer in just a minute.

[00:01:09]
Okay, so here's the way I'm going to handle this particular issue. The first thing I'm going to do is my very first card which is the one that is our featured card. I'm gonna change it completely. I'm not even gonna leave the card part with it. I'm gonna call it just featured, okay?

[00:01:27]
And that means I'm gonna need to set up some featured queries. So immediately, as soon as I do that, all of my other cards have got whatever layout you got at this particular width of the design. But my featured card immediately looks different. So I'm now gonna set up my featured card.

[00:01:50]
.featured, and container name is featured, and container type is in line size. Remember in line size, it's always gonna be that thing, you just put it in, you can call it whatever you wanna call it. Then I'm gonna write my container queries just for the featured card. So @container featured and a min width of 200 pixels.

[00:02:22]
The article will be padding= 1 rem, display= grid, and gap= 1 rem. Okay, so if that feels familiar, we actually kind of wrote that style earlier on the cards. We're now actually just copying that over here for the featured card. Then we're going to add this article, greater than sign star.

[00:02:50]
We're gonna set our margin to 0. It'll tighten everything up really really nicely. And that is it. That is all we need to do for our featured card because its layout never changes after the 200 pixel minimum point. So at less than 200 pixels, there is no formatting to any card anywhere.

[00:03:10]
And when we get larger than 200 pixels, then we've got similar layouts here initially, although they're missing their paragraph. And as we get bigger this layout of this featured card never changes even though the cards underneath are continuing to change.