Cards: Tablet Layout

[00:00:00]
>> We are moving on to our tablet. So this is going to have a 600 pixel minimum dimension, not terribly different from what we had before. So we still have our coffee here on the side, but now we're gonna have the image by itself and we're gonna put the text and the button over here on the outside.

[00:00:23]
So give that a shot and see if you can make that next tablet layout and that will be for 600 pixels and larger. Great, so I hope that, that layout process worked okay for you. We're building on the grid layout that we had from before and we're continuing to work that and expand it a little bit further.

[00:00:53]
So let's go through exactly how that is gonna wind up shaking out. So here we are at a minimum width of 600 pixels, hold, let me make sure I'm at a minimum width of 600 pixels. And then we can start adding some styling, so one of the things that we do is we make our fancy text a little bit bigger, font-size of var-xl.

[00:01:23]
Okay, now we're back into our card layouts again, so we're gonna continue to have our cards all stacked on top of each other. But now we need to move that button and the text over to the right of the image, so let's go through how we're going to do that.

[00:01:43]
So .card again, we've still got this displayed as grid, now we're going to change around our columns again, so grid, template, columns, 40 pixels, 1fr, 0.75fr. Extensive testing showed that this was the right dimensions to use. And then for our grid template rows, we are going to do a repeat 2, Min, Max of 25%, 50%.

[00:02:24]
So, we want to rows and we want those rows to be between 25% of the height and 50% of the height, we do not want these to get extensively large. So that's where we're putting a little bit of a clamp so to speak on these particular items. And then a gap of one rem, so we'll have a little bit of space in between our elements here inside of our card.

[00:02:52]
Now we can go through and rearrange all of the elements that are here inside of our card. Our h2 is more or less in the right place, but because we have changed the structure of our card, I'm going to do this just for security. And make sure we have it in the right place, our grid row will be 1/3, so it's gonna go from the first row down to the two rows, it's gonna span that.

[00:03:18]
And it is gonna appear, of course, grid column in the first column, 1/2. For the image, .card-image, we're gonna have its grid row be 1/3 because again we want the image to span both of the rows that we've specified. So there it's doing that, and we want this to appear in the second column, so grid-column will be 2/3, so there it is there.

[00:03:56]
For our card image, image, we're gonna set a minimum height of 500 pixels, so it'd be at least 500 pixels tall. We don't need it to stretch much further than that. For our card P, we want our grid row to be 1/2, so it's gonna appear in the second row, there it is, there's our paragraph right on top of the image, right on top with the button.

[00:04:30]
Right there in that first row, remember that paragraph from our previous media query has a vanilla background, so there it is. And we're gonna say now, of course, grid-column, 3, 4, which will move it over to the side. And we'd probably want that text to align to the top of the image, so padding-top will be zero, and that will move it up to the top of the image.

[00:04:58]
Notice that the button for order now also moved, why is that? Remember the button is inside of a paragraph as well, so, the style applies to both of those elements and it moved up to the top. Okay, for our card of the last of type, card p last of type, this is the one that contains the button.

[00:05:23]
We can now say grid column 3/4 so we'll move over to that side very happily on top of its paragraph here. But we want it to be underneath of that so grid-row will be 2/3 and that'll move it down underneath of that paragraph. Then we just need to style up the button to make it look the way we want it at this breakpoint.

[00:05:50]
So we're bringing back some of the styles that we had earlier for our button. The background color is transparent, the color is var, coffee. The border is two pixels solid var coffee. And margin-top will be to rim which will push it down a little bit here Okay. And then .button:hover, our background-color will be coffee.

[00:06:48]
Our color will be var vanilla, And our border color will be var coffee. So we should wind up with that working. Now, this is not moving down the way I wanted it to, so I probably missed something in here. Okay, well we'll just do that, I made my column a little bit wider, that gave me a little bit more space there for my rows.

[00:07:25]
And now I've got my order now button showing up correctly underneath all of my Various text here. So you'll want to check all of those and make sure that you don't have overlap with those. And if you do, there's some other things you can do with grid to make that work correctly.

[00:07:44]
So, now we've got three kinds of cards in one layout. Are we ready for the fourth one, [LAUGH]?