Cards: Mobile Portrait Layout

[00:00:00]
>> We've talked about the layout. We've done our semantic HTML. What's our next step? Mobile design. So be sure you take a look at our mobile layout. Now, this is going to be at less than 475 pixels. And we have our cards stacked on top of each other just like this.

[00:00:23]
Not too terribly different than what we have all ready, okay? So be sure to take a look at that. We're going to set up that mobile layout here. Be sure that you're setting your windows small enough, something less than 475 pixels to give you a sense of how this is gonna go together.

[00:00:46]
And I will give you the answer here. All right, so hopefully you did well with that mobile layout. So a few things to keep in mind as you're working on that mobile layout. We have our article with a class of card. Remember what our direct children are. We have an h2, we have a div with class of card-image and we actually have two paragraphs, our first paragraph and our second paragraph.

[00:01:13]
The first paragraph contains text. The second paragraph is containing my link for the order button. So we have a bunch of things that we're gonna need to get styling here, so let's get to it. If you take a look at the way that our page is laid out right now at this narrow dimension, it almost looks like what we're trying to achieve here with a few minor exceptions, okay?

[00:01:39]
So let's just go on through how we're gonna put that together. So for our card h2, Margin will wind up being 4rem 0 1rem 0. So that'll give us a nice fat space at the top, it'll give us a skinnier space at the bottom. Remember, vertical margins collapse.

[00:02:07]
So at the bottom of our first card, we will have 1rem of space, at the top of our next card, we'll have 4. And 4 plus 1 is?
>> 4.
>> 4, exactly, because the larger number is going to win and we'll just collapse those heights. So my font size is a little bit big here, so I'm going to change that.

[00:02:29]
Font size is var(--h3), just to reduce that size a little bit, and then we can say text-align: center. So there we go. We have our little headings here on the page. Now, for the image itself, .card-image img. We're gonna do our usual trick here. So I am going to set the width to 100%, height to 100%, and object-fit: cover.

[00:03:16]
That's to make sure that our image is gonna stretch all the way across the page here. The other thing I need to do is set our border-radius to 0. That way, the corners of the image before, when it was set to 5 pixels, you can see that we have just this tiny little gap over there, will drive your designer friends absolutely crazy.

[00:03:41]
So set that border radius to 0, and now your image will go all the way across the page very nicely. Okay, and then on the actual .card image, Itself, we can say a min-height of 200px. So they have to be at least 200 pixels tall, but they can be taller.

[00:04:12]
card p, remember, this is gonna apply to both our button and our paragraph. card p, we can give this a line-height of 1.5rem, or sorry, 1.5, no units on our line height. padding: 2rem 2 rem 0 2rem. Actually want this to be on the top, the left, the right, but not the bottom.

[00:04:40]
I don't wanna have a giant space here in between my paragraph and my button on the bottom. My margin on those paragraphs, those should be 0, very nice. And the color of the text is all set, coffee. And then the last part is, here inside of our last paragraph, remember we have a link with the class of button.

[00:05:03]
So, here we will set our button class here, and we can set our font-family to var(--decorative). So that'll change us to the Montserrat font, our font-size to var(--h5), just make it a little bit bigger. display, block, we actually want to be sure that we can work with the padding, the margin, and I actually do want this button to stretch all the way across the page.

[00:05:42]
Padding: 0.75rem, you won't really see this until I put the border on it. So let me put the border on it, border: 2px solid var(--coffee). Okay, text decoration of none, get rid of the unsightly underline, and we can center that, text-align: center. We can make this uppercase, text-transform: uppercase.

[00:06:27]
And border-radius, var(--radius). Ooh, such a pretty button, right? So we don't have our hover state yet. The other thing is, my text may be green there, so let me set the color to var(--coffee). It's really hard to tell the difference between that hunter green and the coffee color, but I think I've got it now.

[00:06:57]
So brown text, brown border, and we'll just let the vanilla come through for the rest of that button. Then all we have to do is set our hover state, so our .button:hover. We'll just swap the colors. Always a really easy thing to do. If you're not really quite sure what to do with your buttons, just swap the colors on hover.

[00:07:19]
So our background color will become var(--coffee). And the color will be var(--vanilla), so we can still read it. And I think that's all we need to do. So when I roll my mouse over it, now I have a coffee-colored button. Okay, and because we've done such a nice job with our markup.

[00:07:49]
All of these are all done, you just have to style one. All the rest of the cards are all styled accordingly. We could probably do with some padding down there at the bottom of the page though. So let's go back up to, I guess I haven't styled my card container yet.

[00:08:11]
So let's put the .card-container up here at the top. And I can just say margin-bottom: 4rem, and that will give us a little bit of space down here at the bottom of the page so that our button doesn't run into the bottom. And we have space up there at the top.

[00:08:32]
Okay, so hopefully that was relatively straightforward, okay? So we didn't do anything with layouts, basically. In this particular first example, all we've done is just a lot of padding and margin, a few colors, turning on and off border radiuses, and setting up our initial button, which is gonna stretch all the way across our page here.