Review Layout Exercise

[00:00:00]
>> Next thing that I'd like for you to do is I'd like for you to tackle these reviews. So remember the weird layout that's caused up here is caused by some of those media queries that we had earlier. So you may wind up having to get rid of some of those media queries that were responsible for the review.

[00:00:18]
That's thing number one. Thing number two, inside of the reviews here, let's look at our HTML, so that HTML is changed a little bit. Our figures are the same, but you'll notice that what I called for in between each figure is the quotes, small lightning bolt, okay? And you have access to that small lightning bolt.

[00:00:44]
It's here in the exercise up here, there's the lightning bolt. You can view it for the SVG code, or copy that URL and put it in an image tag, all right? And you'll drop all those lightning bolts on in there. Then what you're going to need to do is look at your designs here.

[00:01:06]
And notice that depending on the layout, you're gonna show different lightning bolts or hide them. Make sense? You don't have to do all the review layout. Let's just focus on getting those lightning bolts in the right place and showing or hiding as correctly. So what I'd recommend that you do is your first approach is go through and put in the lightning bolts, just put them all in and make sure they all work, that would be the first thing that I would do.

[00:01:35]
Then I would think about, just on mobile, what lightning bolts are showing, what lightning bolts are hiding, right? We probably need a class to make that happen. And then you're gonna change that setting at tablet, and you'll change it again at desktop. Make sense? Let's see how you did with the reviews.

[00:01:59]
But before we go there, I wanna point out the error that I made with my buttons. And that is, I have a wrapper here, this is inside of my base styles. I have a wrapper that did not have the max width set. So I set my max width to 500 pixels.

[00:02:18]
And now my buttons are behaving just fine. So without that line, I'll show you what it looked like. They were whacked out in crazy [LAUGH] so when I put that line back in, now those buttons are behaving a little bit better. So that's what happened with that. Remember that later in our document, way down here at the bottom, where have I got it?

[00:02:46]
I've actually got it in my reviews. I have two media queries in my reviews, one is a minimum width of 800 pixels and the other is a minimum width of 1,000 pixels. And here I change the width of my wrapper, okay? So now those buttons should behave a little bit better, okay?

[00:03:07]
So here we are at tablet dimensions. They are bigger than the boxes, the album boxes there, the NEW TOUR and IT WAS ALL A DREAM, they're a little bit bigger than that right now. And that is because their width this currently controlled by the width of the rapper.

[00:03:22]
Make sense? Okay, fantastic. All right, so let's talk about these reviews. So let's start off with our HTML. And what I have going on here in the HTML, we have our figures. We can just fold up the figures, we don't need to even look at them. Then I have a line of code like this.

[00:03:47]
So this is a div with a class of bolt because it's a lightning bolt. And then we have our image source and we have our lightning bolt here. I've left the alt text empty because these are truly decorative elements. They're just little separators on the reviews. We don't need a screen reader to tell us that they are bolts.

[00:04:08]
[LAUGH] Make sense? Okay, so these are just decorative images. Now, some of these, let's take the second one here. I have some other classes in place. I have a class of hidemobile. Guess what that does?
>> Hides it on mobile.
>> Hides it on mobile, wow. And I have other ones here with a class of hidetablet.

[00:04:33]
Guess what that does?
>> Hides it on tablet.
>> Hides it on tablet? Wow, cool. Yeah, super high tech approach here. So there's a mix of those hiding on tablet and hiding on mobile. So then the corresponding code in CSS winds up looking like this. So here I am in my reviews layer, okay?

[00:04:57]
I changed my reviews layout, so I'm just doing flex box now, plain old flex box. Row wrap, justify the content in the center, one rem gap, and text-align center. So everything is just gonna flow with flex box which is exactly what we want, right? We don't want any stiff kind of grid stuff going on.

[00:05:18]
We want these to be a little bit more flexible. So that's why I picked flex box. And then I have hidemobile display none. In my media query, for tablet, we bring back hidemobile, now it's display block and we take hidetablet and we display none. Make sense? Change the padding on the reviews a little bit.

[00:05:39]
So, when we get to the larger screen size, there they are, they look good, okay? And then when we get to the larger dimension, now hidetablet is back to display block. So there it is. And eventually, you can stretch your reviews all the way across the top of the screen.