Cards: Mobile Landscape Layout

[00:00:00]
>> Then the next thing to tackle, Will be our next breakpoint. And so it reminds you what that looks like, is it this crazy thing here? So somehow now we're gonna have to start playing with layouts. We have the title, [COUGH] we have the title is going to have to turn in some way.

[00:00:21]
We have our image, somehow we're gonna have to get the button on top of the image, and we have our paragraph here underneath. So, that is gonna be kind of tricky, but very doable. Hint, grid will allow you to overlap elements like that, in addition to position absolute.

[00:00:39]
So to get that started here, that min-width is 475. @media (min-width: 475px). And that should get you started. So have fun working on our next breakpoint, which is our mobile landscape breakpoint and see if you can figure that out. All right, so I hope you had fun coding that.

[00:01:16]
Next breakpoint here, let's go through all of the craziness. So the very first thing that we wanna do is we wanna try to get the basic elements in place on our layout for each card, and not worry so much about how things look. But if we can generally get things in the right spot, then we can go back and tweak and make sure that it looks pretty.

[00:01:38]
So to do that, obviously, we have a card here in our code. The card's children are the h2, the card-image, a paragraph with some text, and a paragraph with the button. So we can set our article with that class of card to be our parent. And then each one of those individual elements winds up being our children, which means we can move them anywhere on the web page that we want to move them.

[00:02:08]
So let's set that up. So here inside of our media query, we are going to say our card is going to display grid. And then we're going to say, we're going to have our grid-template-rows, sorry, columns. We're only gonna have two columns. We need to have our title, which is turned on its side, and then we have the other column that's going to have the image with the button on it and the text underneath.

[00:02:44]
So to set that up, we'll just say 40px 1fr. So those two columns, so you can see the see and coffee, [LAUGH] over here. We haven't turned the text yet, but there it is over here in its column, the image assigned to the second column. And then this paragraph, it has a space here because, remember, we put some I don't remember as padding or margin on the paragraph in our previous breakpoint.

[00:03:11]
So it doesn't go quite over to the edge, but it's kind of in that column here, and then the button is over in the column with our image. Okay, so that's what it's doing by default. What we wanna do is actually have three rows here. We wanna have a row for the image and the button will be on it, and we'll have a row, with the picture underneath of it.

[00:03:37]
So to set this up, we are going to say grid-template-rows: 10%, 60% and 30%, which is gonna make this look even weirder. [LAUGH] So again, don't panic yet. So we have our image there, you'll see that the image, which comes before the button, is trying to cram itself into the 10%.

[00:04:05]
The order button is in the second row, and I don't think the third row is actually being used at the moment, we have a lot of work to do before we get there. In fact, let's just go ahead and do that now. So if we go to our card h2, first thing we wanna do is assign this heading to its correct space, which kind of already is.

[00:04:31]
We want the grid column to be exactly what it is 1/2 be going from the that first column. And then our grid row will be 1/4, we're gonna have it go all the way down through all of the rows. So which will again ship this layout around a little bit?

[00:04:52]
In order to turn this, though, I am going to lean on my CSS logical properties. Now, if you haven't heard of logical properties, this is a mix of new properties that are available to us in CSS. The way CSS was written, of course, was originally for English, English is read from left to right.

[00:05:11]
And when we think of a box on the page as we have throughout this course, we have a top, a right, a left, and a bottom. That works great if you live in left-to-right land. But if you are writing a language that goes from right to left, or and there are languages that go from top to bottom, this does not necessarily work for you.

[00:05:31]
So there's a whole suite of new logical properties that you can use to lay out some of these other languages. You can also use them for tricks like the one I'm about to do, and that will turn our text on this page. So to do that, you can do writing-mode is vertical-lr.

[00:05:59]
And that will turn your text and it will set it there inside of that column. And it's put it by default in the center of the column. Pretty cool? You can also turn this, of course, lr stands for left to right. You can also do rl, and it changes the order of the lines of text, whether you're reading it up and down from right to left, or up and down from left to right, okay?

[00:06:30]
So this is lr. To get it back up to the start here, we need to go to align-self: start. And I will push that on up to the start of our grid. We also have margin and padding on this, so margin is 0, padding is 0, and that'll get us the rest of the way here to the top.

[00:06:56]
All right, so now we have our .card-image. And this one, we are going to have it go over our rows from grid-row: 1/4 and grid-column: 2/3. So that's gonna put it in our second column. And it's gonna have it stretched over a whole lot of our rows here.

[00:07:21]
So right now it looks kind of tall. And in fact, it's hidden our button and it's hidden our paragraph. But again, don't panic, [LAUGH] one thing at a time we are gonna make this completely work, but you have to type in all the code first. For the card-image, img min-height will be 600 pixels and our border-radius we're gonna turn back on again Var(--radius).

[00:08:00]
As for our paragraphs, .card p, we're gonna put this at our grid-row of 3/4, our grid-column of 2/3. So now we have our image, and we have our button, and we have our paragraph all together on top of this. To cover up the bottom part of this image, we'll also add a background-color of var(--vanilla).

[00:08:39]
And now the button is on top of the paragraph. So, you just see the button here, but the paragraph is still there, it's behind it. And that's because, remember, we have two paragraphs here. So essentially what we just did is we put those two paragraphs on top of each other.

[00:08:54]
So we have the text in the back and we have the button on the front, and both of them have that vanilla background. So now what we need to do is move just the button up here on the page. How do we do that? .card, p: last-of-type. Why not?

[00:09:17]
Because we're talking about our last paragraph there. Here, what we're going to do is do our grid-column of 2/3. But the grid row will be 1/2, in other words move that button up to the top of the page, so there it is up there. How cool is that?

[00:09:40]
[SOUND] All right, so, we need to override that background color, because on the previous style here we set the background to be vanilla. So now that this is later in the styles, we can set our background color to transparent. So that will have the image shine through there.

[00:10:02]
And then we can just change the styling here for our button. So for the button, Our background-color is var(--blue). There it is. And our color is var vanilla. And our border-color is also var(vanilla). Okay, not bad, super sweet. And then, we set our hover state because right now it's gonna go back to the brown.

[00:10:52]
If you like the brown, you can keep the brown. If you don't like it, you can change it. .button, : hover, background-color:var(vanilla). Color: var(--blue). And border-color: var(--blue). Awesome, so now you have a button that looks like that when you roll your mouse over it. The last part, I kind of skipped over some things here has to do with a bunch of padding things.

[00:11:39]
So let me go back to my card style here. Just to clean up the final look here, we can give this a gap of 0 to rem. So that's gonna give us some space between our columns in this case so that they aren't all smashed into each other.

[00:11:59]
And we can give some margin of 0, sorry, 2rem auto. So that will give us a little bit of space on the top and the bottom being given us some padding of 0, 2rem, 5rem, 2rem. So that is 0 on the top because we've already got a little bit of margin there.

[00:12:23]
2rem on the left and the right, so we get it off the edges of the screen. And then 5rem down here on the bottom to give us more space in between the cards And I think that does it for those cards.
>> Why did the background color on the button not work until you did the actual button class for a selector?

[00:12:47]
Cuz you made it transparent and then you made it blue.
>> Right, well, let's see. Well, so what we did was, we have the paragraph around the button. So remember we have a paragraph around the button, here in 173, we set that to be vanilla, okay, and then, which would give us, That, we cut off the top of the image.

[00:13:16]
>> Why does it do that?
>> Well, we set the row to be 10% high. And this button is a little bit bigger than the 10% that's there. So that's what's going on. It's the 10% of that row has that background color and then the button is on top of that.

[00:13:32]
So by adding the background color of transparent, we bring back the rest of that image there, and the button is sitting in a place that I like. Make sense? Yeah, good question. Questions online? Dustin? Any questions online?
>> How do we make the button collide with the copy picture at the top?

[00:13:56]
Sorry, they missed the CSS grid part. So that was answered earlier.
>> No worries. It's grid and we assign it the same rows and columns, at least in part to what the image is occupying. And so grid will very happily put all of the elements and stack them on top of each other.

[00:14:14]
If you assign them the same rows and columns, it'll just stack things on up and be very happy about it. So absolute positioning is a little bit different in that you can take any element anywhere on the page and pile it on top of something else. With grid, you can pile things on top of each other, but they have to be all inside of that same grid.

[00:14:35]
So you're more limited with how you're gonna stack things on top of each other with grid as opposed to absolute positioning, but the end effect here is the same.