Grid: Mobile Layout

[00:00:00]
>> What comes after? We talked about the layouts, we marked it up. What's step three?
>> Mobile
>> Mobile, so that is the next thing to work on. So just to remind you what this is going to look like, here's the mobile. So we have some things that are going on here for the mobile, yes?

[00:00:23]
Right now we have our vanilla background with our coffee text. Notice that, we are going to a coffee background with vanilla text, okay? That's one of the things you're gonna have to change. And then somehow you're going to need to make all those images the same height. And this is gonna be for mobile designs.

[00:00:43]
What did I say here in the project? This will be less than 675 pixels. All right, so go on ahead and start. All right, so hopefully you did well there with that mobile stuff. And let's go on through how we put together this particular layout. So remember that here in our mobile layout, we have this coffee background and we have white text.

[00:01:12]
That white text is centered, so let's go through and get that in place. So we're gonna start by changing our body background color. Now, one of the things you certainly could do is you could go into your base styles and you could make a change here, right? Where it says the background color is vanilla, you could switch that over to coffee.

[00:01:33]
The reason I'm not doing that is, in real life, if this was actually, say, a multi-page website, we may want those base styles to apply to every other page on the site and this page is an exception. Because this is kind of gonna be eventually e a homepage kind of layout.

[00:01:50]
So here, I am just gonna override it by putting in a body style again. So I will say that the background-color is var(--coffee) and the h1 that is gonna be on this page is going to be color: var(--vanilla). So there it is. And if I make this a little bit smaller, you'll see that the text is not centered.

[00:02:28]
So one of the things that I might do is say text-align: center, which will center it so pretty. Okay, then we have our wrapper that goes all the way around everything. Once again, you can flatten up your HTML here just to get the structure of the page. So you can see that we have a wrapper that goes all the way around everything.

[00:02:57]
And that wrapper, we might want to put in some margin on this, 2rem auto, so that will give us a little bit of space on the top and the bottom and center us automatically. And you can do padding of 0 2rem, that will get us off the edges of the browser here, okay?

[00:03:24]
Awesome, Now, for our image wrappers, remember we have a wrapper around each one of those images. We are gonna use that to give us a little bit more space in between our individual images, so .imagewrapper. Let's say our margin on the bottom is 1rem, so that'll push those apart a little bit.

[00:03:50]
And then the last thing that we would need to do now is, remember our images are all different heights and so forth. One of the things notably we had in this design was equal height images. So to make that magic happen, we'll wanna do for these images, img-wrapper img.

[00:04:10]
We'll do a width of 100% a height of 100%, and object-fit of cover. That alone isn't really going to change anything here. But when we go to our image wrapper up here on the top, we can say our height is something like 200px, and that'll make everything an equal height.

[00:04:36]
If you like that, you can keep it. You can always play around with this a little bit, make it 250 instead. If you like that better, you can have that, whatever you wanna do. As I was saying to one of the students earlier, I didn't give you Figma files, so there really is no exact spec here.

[00:04:53]
I don't expect you to be measuring all of these and making sure that you are exactly picture-perfect the same as me. Just something close, the edges of the image are off the the edges of the screen, that kinda thing. So that wasn't too terrible. That was all things that we've probably heard before, right, had to do with that, okay?

[00:05:16]
Yay, nice.