Reviews & Images Mobile Styles

[00:00:00]
>> The next thing we wanna take a look at in our medium design is our reviews and images section of the webpage and to remind you what this is going to look like. This is the reviews and images section of our webpage. Sometimes it's useful just to pull this out of what you're working on and put it in a separate code pen so you can just focus on one part of your page at a time, so we're just gonna focus on this part of the web page.

[00:00:26]
And as you can see here in this slide, the very top is the way that our mobile reviews are going to look. In other words, we're gonna have four reviews, no images. When we go to our tablet, we've still got four reviews, but we're gonna have images in the middle, and we have the border that goes around the whole thing.

[00:00:45]
And then when we go to Desktop, this will be a column in our desktop design. So we're gonna stack things on top of each other, stack the review, stack the images, and so forth on top of each other. So as we get started with this section of the webpage, my first question to you is this.

[00:01:04]
What order should we have our HTML to satisfy all of these layouts? Does anybody have an idea what order? And you can just sort of generally talk like review image, that kind of thing, we don't need to worry about the details of the HTML. May, you have an idea?

[00:01:19]
Yeah.
>> Review image, review image, review image.
>> Yeah, so we're just gonna alternate starting with the review and going to the image, so we're actually looking at the desktop as our HTML ordering here, right? Because that's that simple flow from top to bottom, and we'll modify that for mobile and for tablet, okay?

[00:01:43]
Does that make sense? Okay, cool. So, if you fork your CodePen and open that up in CodePen, you'll see here, this is what we have to start with. So, we start with a review, that's the review that's inside of the figure. We mark that up in our Easy Design, that markup hasn't changed.

[00:02:02]
Then we have an image that comes after that. You'll notice that the image is inside of a div already, that div has a class of featured- image because these are featured images, I don't know, that's what I decided to call it. Remember that div is there just to make those images flexible.

[00:02:21]
And we alternate these, so then we have another quote here, we have another picture, we have another quote, we have another picture, and then we have our last quote here on the page. So we are going to give our aside, which we've wrapped around this whole thing, what is the purpose of the aside element, by the way?

[00:02:43]
Does anybody know what the purpose of the aside element is? Why did I pick that?
>> So an aside is secondary content to your main content, so without the main content there, the aside wouldn't necessarily make sense, so it's in support of whatever is the main content on the page.

[00:02:59]
>> Exactly, so it's in support of the main content. So our main content is those tour dates and this is people saying, hey, you should go on the tour because it's totally awesome, right? This is that convincing material. Okay, so that's why we chose the side. Let's give it a class of reviews, because we're gonna need a class in order to get this going.

[00:03:24]
All right, so let's get into the CSS now. I'm gonna pulling up our CSS here, we have our reviews layer right here inside of our CodePen. Remember, you can collapse these layers to find the reviews quickly and easily. And if you take a look here, [COUGH] we copied this from our previous work here on the easy design, that's what that comment there says.

[00:03:51]
We've already styled the block quote, and the site, and the figure, that's all in our base layer, so I'm just gonna pull that comment out. And we have a class here for image group. That was something that we used in our easy design where we had groups each image with a review, we don't have that class anymore, so we can just get rid of that style as well.

[00:04:13]
We'll still wanna keep that star style to keep our stars at a reasonable size. So now that we've got that in place, what do we need to do as a first step to achieve our mobile design? So for our mobile design, remember this is what it looks like.

[00:04:29]
What is the first thing that we should do in our CSS to achieve this mobile design, anybody?
>> Remove the images. Let's hide those images. Yeah, okay. So, if we take a look here in our HTML, remember we have a div with a class of featured-image. So all we should do here then is say .featured-image, that's our class, and we can say display: none.

[00:05:01]
And all those images go away. Super simple. Okay, then next we wanna style this reviews container such that we get our four quotes, two on the top and two on the bottom, remember, just like we saw here. So we need two on the top and two on the bottom.

[00:05:26]
Does anyone have any suggestions about how we might achieve that particular layout? The grid.
>> Maybe CSS grid. Let's try it, okay? So if we go to our CodePen, we can work right here with our reviews, which is our parent. Yeah, we have a parent, we have all these children that come after it, so .reviews Anybody have any suggestions what should be my first step here?

[00:06:02]
What kind of styling do I need in order to achieve that two on the top and two on the bottom, kind of centered on the page?
>> Start with center in it, maybe margin 0.
>> We could start.
>> Yeah, we could say margin: 0 auto, okay? And why didn't not do anything?

[00:06:23]
>> Maybe because we haven't set the maximum width.
>> Maybe because we haven't set a width yet. Remember we can always stick a border on it, border one pixel solid white. And notice that our border goes all the way across the page. So we did do the margin: 0 auto, it's just occupying all the space, there is no extra space to make it centered.

[00:06:46]
So we need to always set a width when we use our margin like this. In this case, we can set a max width of 500 pixels. There we go. And now we have the right width, and it's centered for us as well. What else should we do here?

[00:07:08]
>> Center the content. We could center the content. So text-align: center. There it is, great. What else?
>> Display a grid with two columns.
>> Yeah, display a grid.
>> And then grid-template-columns: 1fr 1fr. Actually not bad, looks pretty good. What are we missing?
>> A gap.
>> Maybe a gap, 2rem.

[00:07:53]
There, a little space in between them, okay? That looks pretty good. I've also got here justify-content: center. I'm not sure that actually does anything here, cuz our text-align will do the same thing. Okay, so once you got all that in place, we can get rid of our border here if you want.

[00:08:17]
The other thing I'm going to do while I'm here, I'm gonna change my 0 auto to 2rem auto, that'll give us a little bit of space on the top and the bottom there, so we're not shoved up against the edge of our browser window, it just looks a little prettier.

[00:08:31]
Cool, so we're all done with that. That was pretty straightforward. That is our mobile design. That's our code for it, pretty similar.