Reviews & Images Desktop Styles

[00:00:00]
>> So, now we're gonna move on to our desktop layout. And to remind you what that looks like, Here we are. Okay, so we've got our mobile layout, we've got our tablet layout. Now we're going to our desktop layout. Does anyone have any ideas about how we might lay out our desktop layout?

[00:00:31]
>> You could use a single column grid or you could use a flex with a direction of column.
>> Yeah, there's two possibilities. So we could do a grid-based layout. We just have one column, we have a whole bunch of rows. And then maybe we'd play around with some padding or something to push those images over, that's one way to do it.

[00:00:53]
We could do it with Flexbox, maybe. Okay, and I'm gonna give you a third possibility of how you could go about doing this because not everything requires Flexbox or Grid, okay? So, let's look at a third possible way of doing this. So, I'm gonna make my screen a little bit bigger.

[00:01:21]
Okay, I'm gonna try to get it out to at least 1000 pixels. All right, and you can watch to your little number down there at the bottom of the code pen, it will tell you how big that window is. So make sure it's big enough to see the styles that we're about to add.

[00:01:42]
All right, that'll end our media query, we don't wanna take the last bracket there that ends our layer. We're going to add another media query @media and then this will be min-width of 1000 pixels. Okay, so here's one possibility for you. And as I said, there's nothing wrong with working with Grid, with working with Flexbox, that's all great.

[00:02:13]
But I wanna show you this as well because sometimes this is a cool way to do things depending on what else you have going on in your site. So, for my reviews class, we can simply turn off Flexbox and Grid. And the way to do that is just say display: block.

[00:02:32]
Once you do that, it will go horizontal or vertical for you right into a column, there it is. They just stack on top of each other automatically just like that, okay? So, super simple. And then we can set a width for this. And 200 pixels is wide enough to give us kind of what we're looking for here.

[00:02:58]
Now, what happened, of course? Why did my first review there, why did that look so crazy? Why did these reviews all look different? What's going on here?
>> The padding.
>> Yeah, the padding, right? Cuz we put padding on the tablet, it continues to apply here at the desktop.

[00:03:18]
So, the first thing we might wanna do there is we need to list all of those selectors. So .reviews, figure: first-of-type [LAUGH]. We're gonna list them all, .reviews figure:nth-of-type(2), .reviews. Figure:nth-of-type(3), .reviews. Figure:last-of-type Padding: 1rem; So, we'll make them all have the same amount of padding.
>> Could you write that as nth of type n?

[00:04:30]
>> You might be able to, sure. So, let's try that. [INAUDIBLE]
>> I think this is clear because now we know we're overriding, all those things that we wrote, but your shorthand may be a wonderful way to do this. So let's try that. So this is .reviews figure(:) you want nth of type n.

[00:04:54]
In other words, all of them, right?
>> Yeah, so you can put small equations inside of those parentheses in there.
>> Right.
>> And the type will basically calculate whatever that equation is and attribute all of the matching elements and apply the selector or rather the property value to those selectors.

[00:05:18]
>> Right.
>> Nice.
>> So there's a shorthand for you. Let's just apply it to all of those. Either one is absolutely fine. Whatever improves your understanding and is clearer, that is absolutely what you should go with. But that is a very sweet little shorthand there, isn't it?

[00:05:37]
Okay, either one of those works great and achieves the same effect. Okay, so that looks pretty good, our only problem now is we need to push those those images out of the box a little bit, right? Does anyone have any idea how we might go about doing that?

[00:05:57]
So, we're talking about .featured-image, okay? So let's try some of those things. Margin-, what? Left or right?
>> Left
>> Left, and we'd say something like -1.5 rem. Okay, cool, very close, very, very close. But what we're looking for is we're gonna have a gap over here on the side too.

[00:06:36]
So, what else could we do?
>> Relative positioning.
>> Aah, relative positioning! That's an idea, yeah? So, if I said position, you guys familiar with relative positioning? This is craziness. So, let's just do it this way. Position: relative. All right, now, nothing is gonna happen initially cuz we haven't told it what to do yet, other than we just set up the relative position.

[00:07:06]
Anytime you see that, what is the question you should ask?
>> Relative to what?
>> Relative to what? [LAUGH] That's your million dollar consulting question, relative to what? What this will do is it will go back through your HTML hierarchy to the closest element that has a position other than static.

[00:07:28]
Great, what would that be, okay? Cuz basically, static is the default position for all of your HTML elements. So, if we look at our HTML here, everything has a static position, okay? So, if we want and I just made my screen smaller so it switched. So if we want those images to be relative to something, maybe we wanna go back to our aside with the class of reviews, okay?

[00:07:58]
So to set this up. We might go back to our side. I'm actually gonna put it cuz we can just put it in our desktop style here. And we could say position: relative here. So, our featured images will refer back to our reviews for a relative, sort of, anchor point.

[00:08:23]
And then we can say, right: 1.5 rem; and whoops! I did put it on the wrong thing sorry, [LAUGH]. Not the reviews, gotta put it on the image right here. Right: 1.5 rem; there we go. And that will pull your images right out of the box just like that and give you that little bit of space, so it pulled it to the right.

[00:08:59]
So the key here with relative positioning is that you can move this image around anywhere on the screen, but the space that the image occupied will stay, okay? As opposed to absolute positioning, which you may have heard of, so if I said absolutely position it. Look at the difference here, here we've pulled the images out of the normal flow.

[00:09:27]
We still pulled them over by the side, but all of those reviews, the quotes, they collapsed the space that the images used to occupy. So, that's what's going on here, okay? But when we use relative, that space that the image occupied is preserved. So, we still get that stack thing on top of each other.

[00:09:51]
This is what I mean by there's a lot out there [LAUGH] for positioning and layouts. This is very old school, positioning has been around for a long time.
>> With absolute, it's still looking for the closest relative, right?
>> Closest relative, closest absolute, closest fixed.
>> Any of those?

[00:10:11]
>> Or sticky, anything, anything other than static. Okay, so sweet, we now have this amazing little widget here that does this whacked out layout you never thought was possible. And you wrote all that code and you actually understand it, yeah? Yay! [APPLAUSE]