Reviews & Images Tablet Styles

[00:00:00]
>> Now, we are moving on to the more challenging and more interesting layout, and that is our tablet layout. Okay, so how are we going to make this happen? Anybody have any suggestions?
>> Grid again.
>> Maybe grid again. We got three rows there, but my first row has two items in it, my second row has three items in it.

[00:00:30]
How do we make that work with grid?
>> We have a container that contains the images and then use flex for that container, and then that would take up the second row completely.
>> That might be an idea. We could do something like Flexbox, where we have these three images here in the row kinda thing.

[00:00:52]
Might work, definitely might work. Not sure how we're gonna get that border on the outside there, though. So one of the things that we can do, [SOUND] I put together this high quality graphic here for you. So rather than thinking of this as two columns or three columns, what if we think about this as six columns?

[00:01:18]
So we actually have six columns going across the page here. So our reviews on the top, they are gonna occupy three columns each, our images will occupy two columns each, and in my last row, our two reviews will accommodate three reviews each. Kinda make sense? Okay, this is also useful for counting grid lines, because we're gonna need to assign each one of these elements to the right space, right?

[00:01:48]
Okay, so let's just do a quick count here. So for that Just WOW review that's up there in the upper left corner, what would be our grid column numbers, the starting and the ending number? We start with what?
>> One.
>> One, and we end with what?
>> Four.

[00:02:07]
>> Four, one, two, three, four. So that fourth line is roughly there in the middle. Remember, we start with the yellow on the outside, we're going to the middle here, and we count like humans, so we start with number one. And then that second quote there, what are its numbers?

[00:02:26]
It's gonna start with number what?
>> Four.
>> Number four, and end with what?
>> Seven.
>> Number seven, right? Six columns, but there are seven lines, make sense? Okay, so that's where those kinda numbers are gonna come from. All right, so now, all we have to do is just write that, yeah?

[00:02:52]
Okay, so I'm gonna put in a media query at media, and I'm gonna say a min-width of 700 pixels. Why 700 instead of 800? I just thought that but this looked better, that's pretty much all there is to it. I thought it looked better. So what is the first thing that we should do here in our media query for the tablet?

[00:03:22]
What's the very first thing that we should do?
>> Change the size of the reviews container.
>> We could change the size of the reviews container. So what would you recommend, Jason?
>> Given that we want those three images to extend beyond, it should be a certain amount below whatever the max size of those three images side by side is.

[00:03:48]
>> Yeah, so if we put those three images side by side, actually the images, we wanna have them stick out of the grid container. So here's one of the issues with that. Actually, before we even get there, maybe we should show the images so we can see what we're doing.

[00:04:03]
Anybody have an idea of how we might do that? featured-img, how do we show our images?
>> Display block.
>> We could display, block for sure. Okay, or you can display them inline block, that would be another way to do this What's going on here? Why does it look like this?

[00:04:32]
>> You haven't defined positions for anything in the grid yet.
>> I haven't defined positions for anything in the grid yet. So it's actually still applying grid template columns of 1fr and 1fr, isn't it? And it's putting things where they belong. That's what grid does. Okay, so for our reviews, then, Let's start by putting a border on it, 2px solid, and that was var(--cyan).

[00:05:06]
That will put a nice blue box around the whole thing. Okay, We're still gonna be working in grid. We've actually declared display: grid here at the mobile level, that will carry into our media queries. But I think for clarity, for reading this code, I'm just gonna put it in one more time, just sort of for documentation purposes for the next person who comes along to read this.

[00:05:40]
Now, we're talking about making six columns here. So if I said grid-template-columns: repeat(6,1fr), what's gonna happen is this, right? Everything is contained very nicely inside of our grid container. It's doing the best it can to shove all six of those things together, but our container is a little bit small right now, so it's wrapped onto another line.

[00:06:12]
That's why we don't get six things, or is that six things? That is six things. We have seven things to lay out, and we have six things going across right now. So that's why we have one there on the second line for quotes and three pictures, okay? But notice that nothing is hanging outside of that outside container, and that's because we're working with fractions.

[00:06:35]
Fractions are flexible. Everything should be contained inside of our grid container. So if we want that effect where some things are hanging outside of that container, so-called grid blowout, we'd actually wanna work with a fixed width for our grid columns. And it is possible to use pixels there.

[00:06:56]
We often don't, because we actually usually want a flexible kind of grid. But here, we wanna have a fixed width so that we can get that effect of having those images hanging outside. So I am going to change this to 90px, 90px, so repeat(6, 90px). And if you multiply those two numbers together, 90 times 6, you'll come up with 540.

[00:07:25]
So our max-width, Actually just our width, sorry, width, will be 540 pixels. And I'm using just width here because I actually don't want this whole layout to flex once again. And since our breakpoint is at 700 pixels, this will never get smaller anyway, all right? So 540 pixels, that's what we want.

[00:07:55]
So now comes the fun part. One of the things that we can do here is we can set up some ordering for each of these reviews in each of these pictures and that will help us order these interows, okay? So what I wanna do is set up a selector basically for each one of these elements, each one of the reviews specifically, and then one sort of for the images.

[00:08:24]
So we could do that by making a whole bunch of classes. We could put classes on all those reviews and so forth, and write classes for them. But because we have people out there who are selector fans, let's write some whacked out crazy selectors because we can, okay?

[00:08:41]
So what we wanna do here is we have reviews, of course, is our container and we have figure, figure, figure, right? And we have these divs with the class of featured images in between. So nth child isn't going to work here. nth child will not work here, because our first child is figure.

[00:09:04]
But if you think of our figure our second child, and you're thinking of the figure, that doesn't exist because the second figure is a third child of a side, right? It's actually the third child. So we're going to work with the of type selectors, so nth-of-type, which will select our first figure, our second figure, our third figure that way.

[00:09:29]
And I talk more about that in the intermediate CSS course, the difference between nth child and nth-of-type. Okay, so here, we're gonna say, for our reviews, figure: first-of-type. And let's set its order to 1. That's gonna try to put it in the first row, nothing is gonna change, cuz it's kind of already there.

[00:09:58]
Actually, I lied. Let me rephrase that. If you'll notice, just wow, that was our first quote. It shows up down at the bottom. And anybody know why that is?
>> Cuz none of the rest of them have in order.
>> None of the rest of them have an order, so they show up before that one.

[00:10:18]
So as we continue to add things here, it will show up in the correct location, which is up in the first row. Okay, so then can anyone suggest how I select my second figure, HTML element here? Can anybody suggest a selector for that? Figure what?
>> Second-of-type selector.

[00:10:43]
>> Second-of-type, very close. The way we would write that is nth-of-type(2). Yeah, we have a first-of-type, and we have a last-of-type, and then everything else has a number. [INAUDIBLE].
>> Yeah, good guess, okay? So this one will also have an order of 1. Okay, and then let's pick our third reviews.

[00:11:16]
Let me just start copying these. So for our third reviews, how do I modify the selector? Switch the number. Gonna be number 3, and we want the order to be what?
>> 3.
>> 3, cuz we want it in the third row. And then our last one, .reviews figure.

[00:11:38]
We can say last-of-type, or you could say nth-of-type 4, that works too. Order will be 3, okay? Now, how about our images? The images are gonna go in the second row, right? So we can just say that our class featured-img, the order will be 2. Okay, so we have the first thing done.

[00:12:18]
We have our two reviews that go on the top, we have our three images, and then we have our last two quotes. Make sense? We haven't assigned things to cells yet, but they're at least in the right order on the page. [LAUGH] Okay.