Background & Overflow: Media Queries

[00:00:00]
>> So that was really, the very, very hard part here, getting this working on mobile. So the next one that we need to work on is, basically, somehow we have to turn off that scroll bar, then we have to rearrange how these are presented on the page, right?

[00:00:21]
You have to display our paragraph, Right, that first item, we need to have a picture on one side and some text on the other. And then we need to have the headlines and numbers underneath. That's a lot, okay, cool, and then I'll go through the answer here with you.

[00:00:48]
Okay, so now, we have these larger breakpoints, and these take a little bit more massaging to take a look at these. So remember, we have our outside card, right? The wrapper with the card children, that's one layout, and then we have the layout of the cards themselves, okay?

[00:01:14]
So here we have four cards that have just two components, they have a number and they have a headline, everything else is out of the question. And our very first card has the number, the headline, a paragraph, and an image, okay? And somehow that has to go all the way across the page.

[00:01:33]
So let's start by laying out our first card, just that, then let's lay out the rest of our cards. And then let's lay out the cards on the page to get the pattern that we have here. So some of this is often working in CSS is thinking about how to break this down from one giant layout problem into these smaller chunks, and this is a good way to do it.

[00:02:00]
So we start with one card, get it to work the way we want, add the other cards, and then lay out everything all together. Okay, so, what we're going to do here, we're at 800 pixels. So now, what I'm going to do is, remember my card? Layout, right now, we have our grid-template-columns: 30px with a (250px, px).

[00:02:33]
So two columns, that is going to continue to work for us here on this tablet for these items that are down here on the bottom, right? That continues to be true for these, it's this one up here on the top that winds up being a little bit different.

[00:02:52]
So, All right, so let's start down here then. So first of all, card image, I'm gonna hide all the images on all the cards, and make sure I'm at 800 pixels, there we go. The other thing I'm going to need to do is I'm gonna need to differentiate this first card from the others, so I'm gonna give this a second class.

[00:03:32]
If you don't know, you can have as many classes as you want on a given element, you just separate them by spaces, so class equals in quotes only one time, and then as many classes as you want after that. And I'm gonna call this one 1, because it happens to be the first card, so I can make exceptions to the rule.

[00:04:04]
Okay, so then I'm gonna have my card called 1, and I am going to set this a little bit differently than the rest of mine. I'm gonna have grid-template-columns: 30 pixels 1fr 1fr;, okay? And I'm going to have grid-template-rows: 3rem 1fr. And let's also bring back one's paragraph, we have a paragraph of information.

[00:04:45]
So .one p {, we can say for this one grid-column: 1/3, it's gonna go across a couple of columns. We can say display block, which will turn it back on again, so we can see it. And .one image { display: inline-block;, so we turned off all of our images earlier, right?

[00:05:21]
But now, we've turned on the image just for that first card right here. Now, we need to place that image, so .one .card-image { grid-row: 1/3; grid-column:. We have 3/4 and a max-height: 350px, I think the image has gotten lost here, because I don't have the rest of the layout done.

[00:06:06]
So let me go back, and I'm trying to make this simpler for you and working on one layout at a time, but unfortunately this isn't quite working that well. So let's go back and get the cards generally in place with the wrapper. Okay, so for the .wrapper { grid-template-columns: repeat(2, 1fr);, okay?

[00:06:39]
So that gives us two big columns for the rest of our cards here grid-template-rows: repeat(3, auto). Okay, align-items: start;, this is going to push everything up to the top, so that pushes up our little highlight there up to the top of our grid cells rather than being aligned in the center of our grid cells.

[00:07:16]
So it pushes the columns to the top of the page, notice that our we go one, two, three, four, five, going across the page. Whereas in our layout here, our numbers go down the page one, two, three down the page, all right? So cool little trick to make that change is the grid-auto-flow: column;, and that will put the numbers going down the page, it changes the order of this and we can have a gap: 2rem.

[00:07:57]
Okay, still not quite what we want there for one, yeah? What's going on there for item number one? What is the problem that we have?
>> One itself needs to span all the columns of the wrapper.
>> Exactly, one itself needs to go all the way across the wrapper, yeah, so when we could go back here to one.

[00:08:23]
This is, The layout in the card, right, is those two things, and then we also have placement within .wrapper, where .one is a child. So notice that you can be simultaneously a child and a parent, just like in real life, you can be both a child and a parent.

[00:08:54]
So you may wind up with an interesting mix of things here, grid-column: 1/3 grid-row: 1/2. Okay, well, we mostly have it there, the only thing that we have left to do now is deal with that number, right? It's a weird thing going on with number, and so, I have .number and .one, .number {, Background-position:, again, just experimenting, 0% 2rem; and background-size: 100% 1rem;.

[00:09:51]
And I think that's pretty close to done, I think I've got all the styles, all right, so what do you think? Even if you don't follow all the things that I've typed in, you see the logic here that we're following in terms of laying this out? And the key takeaway here from this particular exercise is that we have layouts within cards and we have layout overall for all of the cards.

[00:10:13]
And those are two separate problems that we're kind of working at the same time, make sense?