Team: Mobile Layout

[00:00:00]
>> Fantastic. We've talked about the layout. We've done our semantic HTML. What is the next thing we need to do?
>> Mobile.
>> We need to do our mobile layouts, yay. So let us start on that. And to refresh your memory. Our mobile layouts is going to have each of these people.

[00:00:23]
They're just going to be stacked on top of each other, okay? And you're going to have the icons on the edges of the image. Now, if you are new to the concept of position, in this case, position absolute. What I would like to see you do in this step is, you can do the following.

[00:00:41]
You can make your image round, make your image round. Set up the styling for the person's name. We're gonna have to steal fancy text, we're gonna need to change a few of the variables there to make it a thin line instead of a fat one. Make sure your icons are about that size, give them a green background and make them around.

[00:01:05]
If you can't get the icons on to the image, don't worry about it. But if you can do at least that. So you have Michelle, Owner, and you have three icons right here underneath. That would be a great place to be when you finish the step. And then, I'll talk you through how you're gonna move those up onto the image, all right?

[00:01:27]
All right, so hopefully you were able to get at least partway through the design here. So let's go through some of the more straightforward aspects of this styling first. So I'm gonna start with my regular old figure here And in my regular old figure here, I am going to start by giving this a little bit of margin around each figure.

[00:01:55]
So margin is going to be 0 auto 3rem auto. So that will center this, the figure on the screen, and it will give us a little bit of extra space down here towards the bottom. No judgment on how things are looking yet because we got a lot going on here.

[00:02:14]
[LAUGH] We have a lot of things to fix. In addition to this, we're gonna set our padding to zero. And I'm gonna set a max-width of 300 px. Now, why am I doing that? Well, when we get to putting the actual icons on top of the image, we're going to need to do some pretty precise positioning here.

[00:02:38]
And it will wind up being that these are not gonna be responsive the way we've made other things responsive. Because trying to track where the icons are going, in addition to the image and how things are expanding and contracting, gets really, really tricky. So we're gonna do it this way instead.

[00:02:56]
[COUGH] Then, I can say figure image is going to have a border-radius of 50%. That makes our image circle, and I can give it a border of 2 px solid var(--green). Now, the moment I put all of that on the page, notice what's happening down here. Oops. [LAUGH] It did that for all of my icons as well.

[00:03:32]
Why is that? Well, this is just a relationship of a descendant selector, right? And these SVG is are inside of an image element. And they are descended from the figure, even though their way inside of a figure caption. So, to get just this first image, what do we need to do?

[00:03:51]
>> Greater than.
>> Put in a greater than sign, and that'll get just the first image to be round with the border and not affect the icons. Sweet little trick. Okay, next let's take a look at our figure caption. So in our figure caption. First thing I'm gonna do generally is just say text-align:center, because pretty much we want everything centered, and that's an easy way to do it.

[00:04:30]
Then, for my h2 inside of the figure caption. Figcaption h2. A couple of things. So first of all, display: inline-block. Mostly, what that's going to do for me is make this a little bit smaller for some of the stuff that I'm going to add. Remember that an h2 is gonna be as wide as its container.

[00:04:59]
And if I, probably the easiest thing to do is to do it those way. Border: 1px solid black. So right now, the width of the h2 is all the way across Michelle's name here. And remember, one of the things that we wanna do with this h2 is put that lovely fancy text effect on the bottom, but we want it to be as wide as her name.

[00:05:24]
So by adding display: inline-block. We will make that box just as wide as her name, with no padding on it, without changing anything else. And we can still have margins and padding on that h2 overall. So that's why we did that. Okay, so then, I'm gonna go back to my fancy text.

[00:05:51]
So in my base, if I scroll all the way down, we can find our fancy text, and I'm going to copy my fancy text style. And I'm going to drop that into my h2 here, and make some tweaks to it, because this is a little bit tall. So we want this to be 100%, 20%.

[00:06:17]
That's the big difference. Here we go. Nice? Everything else can be the same. So we've got that part done, whew. Any questions on that so far? Hopefully, that wasn't too brutal. Okay, continuing on here, for figcaption p. So the paragraph or the name of the person, we probably want that a little bit bigger, font-size: var(-- h5).

[00:06:55]
We'll make it a little bit bigger, nice. And I'm also gonna give that a margin: 0. Because, remember, our paragraphs have some margin on them by default. By taking it off, we'll put the owner closer to Michelle, and scrunch up that space a little bit. All right, so that takes care of sort of general styling here.

[00:07:23]
And those of you who are junior people, like kind of just learning today, this is probably doable for you, at least this far.