Column & Cover: Media Queries

[00:00:00]
>> So now you have your mobile design, yay. [APPLAUSE] We're on to the next one then, which is the minimum width here is 600 pixels, all right? So we need to have two columns of information here. And I will get you started on this because there have been so many questions so far.

[00:00:22]
So what I'll say is, to set this up, the way you're gonna do it is you're gonna say @media and then min-width, inside of parentheses, 600px. Anyone wanna take a guess at what that means? What does that mean, min-width: 600px?
>> The size of the user's browser is that if that's more than 600 pixels, then these will apply.

[00:00:59]
>> 600 pixels or larger, right? 600 pixels or larger, apply these styles, okay? So just to show you how this might work. If I said body, color: red, then what we're gonna have is when we get larger than 600 pixels, we have red text. And when we get smaller than 600 pixels, we have our default brown.

[00:01:27]
Makes sense? You can do it, I wouldn't recommend it. Just because you can doesn't mean you should, okay? But that's how this is gonna work, all right? All right, so I hope you did well with the next breakpoint along the way, and that you were able to set this up for so-called tablet.

[00:01:52]
These are terms that we use kind of for convenience purposes. There is actually no defined screen size for mobile, tablet, or desktop, but I tend to refer to these terms just cuz it's shorthand and it's easier to deal with, small, medium, and large screens. So remember that as you write your media queries, it is a minimum width of 600 pixels where these styles apply.

[00:02:17]
That means that all of the other styles that we've written before, everything from your base, everything from your mobile styles come through to your tablet display. These are now enhancements. So we enhance that level for mobile to make it do something slightly different for tablet. So the minimum width is 600 pixels, and I think our last breakpoint is around 800 pixels.

[00:02:42]
So you may wanna try setting your screen somewhere larger than 600, less than 800. So I've got mine here at about 706, you can put yours around the same point here. So the first thing that I'm going to do, remember that in our mobile display, we said we had in our base, we had our scale set to 1.25.

[00:03:08]
Then in our mobile display, we reset it to 1.15. Well, here inside of our media query, we're going to reset it again back to 1.25. So we'll reset our style to a scale of 1.25, because we're now at a larger screen and we'd like to go back to our larger font size.

[00:03:34]
Okay, the next thing is that in our tablet display, we had noticed that we had two columns. So we have one column with the entire article in it, and we have one column with the image in it. How are we going to set that up? So the way that I went about doing this, as I said article, okay?

[00:03:59]
So obviously, the article, we now have to set this to have two columns, right? Do I need to say display grid here?
>> No.
>> Denish is shaking his head no, why not?
>> Because it's already been in the part of the route.
>> It's already cleared up here, right?

[00:04:15]
So this is gonna carry through. The web browser's assuming you still wanna display grid, you still want the template column to be a single column of 1fr, and we're gonna have 6 rows, all right? So all we have to do here then is say grid-template-columns will be 1fr 1fr.

[00:04:36]
So two columns. Now, if you do that, what happens?
>> Everything is split up into the two columns in order of their rows.
>> Correct, so remember our rows from up here, we had six rows, right, because we have six elements. So our h2 shows up in our first column, our first paragraph shows up in our second column.

[00:05:01]
Then I guess we have the image, which is showing up where we told it to. Remember we said we wanted it to grow from row 2 to 3. Well, here's where row 2 to 3 is. It put itself in the first column. It put this paragraph over here cuz we haven't said where it's supposed to display, so it's just gonna continue on.

[00:05:19]
Then our third paragraph shows up over here on the left side, and the footer over here on the right side. Does that kind of make sense? The image is in an odd spot because we already called out where we wanted it to display up here in our mobile styles.

[00:05:34]
We said to display in row 2 to 3. So it put it there, that's row 2 to 3, and it put it in the first column. Kinda sorta makes sense? Okay, So with that knowledge, what do we need to do next in order to make this look the way it should look?

[00:06:05]
>> First, the h2 should be one single column.
>> The h2 needs to go all the way across the top, it shouldn't be in one column by itself, right? So let's start with that. How are we going to fix that problem?
>> Is there an h2? And then you can say grid columns, and then tell it to span from 1 to 2.

[00:06:24]
>> Exactly, so we can say article h2, not all the h2s in the world, but the ones inside of the articles. We want our grid-column to go from what? So 1 to 2, 2 to 3, right?
>> Also 1 to 3.
>> So 1/3. Aha, make sense? Okay, how about we try the footer next?

[00:06:57]
So here's the footer, it's over here in the column by itself. Where should it be?
>> grid-column, exactly, 1/3. There it is. Make sense? Everybody okay so far? Okay, now, as for our image, we could tell our image to go to our second column and occupy all of the rows in that column.

[00:07:31]
If we do that, what will happen to our paragraphs? [INAUDIBLE]
>> Well, what happened here when we told the image we wanted it in row 2 to 3? It stuck in the first column for us, right? So it's possible the grid will just say, well, you still have this other stuff that's here, let me just fill in the holes for you.

[00:07:56]
Make sense? So grid will just drop the paragraphs over here in the left column in the correct order. It's kinda smart that way, all right? So to make that happen, let's just start with this. I'm gonna say, the article, -img-wrapper, we will just say, grid-column: 2/3. Makes sense?

[00:08:28]
We want it to go over here in the right column. And then how many rows do we want it to occupy?
>> All of them.
>> Well, not the first row.
>> So 2 to 6?
>> 2, do we want it to go down and cover the footer?

[00:08:47]
>> 5.
>> So 2/5. See that? So now we have, there's our header occupying two columns. Then we have our image occupying one, and then we have all of our text over in the left column. How cool is that? So what we wanna do, let's just talk about columns cuz that's an easy one to do.

[00:09:12]
Remember we're gonna count like humans, not like engineers. So we start with one, and we're just gonna count. So one would be here before the columns start. That is number one. Number two is going to be where that first column ends, okay? That's number two. And then number three is going to be where the last column ends.

[00:09:33]
In the case where we have two columns, one to two, two to three, okay? Likewise with rows, that first row starts up here, one to two, okay? And then the second one is gonna go two to three, unless we tell it to occupy more. And in this case, we told it to go all the way down to five.

[00:09:59]
So our footer goes all the way across the bottom. Now, if you ever get confused along the way, use my favorite trick, article, > * border: 1px solid black.
>> You got arcticle.
>> arcticle.
>> arcticle, thank you. That will do nothing, article. There we go. That will put a border on everything.

[00:10:26]
If you can't see it, you can't style it. Use your borders to understand where things are along the way. So you can see here, there's that h2 going all the way across. Obviously, here's our columns, right? Here's that image spanning all the way down these rows. There's the footer going across two columns at the bottom.

[00:10:46]
Makes sense? So this is always a very handy thing to do. You've got to put a border on it to understand what's happening. Okay, so the last part of this is the image. And this is super cool because this is a new technique that everybody is just gonna love because I loved it.

[00:11:04]
And that has to do with dealing with this image. So right now, what's happening with the image is that's the whole image that's displaying there in that right-hand column. What we actually wanna do, though, in our tablet is we wanna take part of that image and show it maybe a little bit longer than it is.

[00:11:22]
Make sense? Okay, so to do that, what we're going to do is the following, I'm going to put in article img. Step one is to say this, we're gonna say our width is 100% and our height is 100%. And this is going to do a bad thing to your image.

[00:11:45]
[COUGH] Why did it do this? [INAUDIBLE]
>> As we said, width and height inherit from the container that it's filling in.
>> Correct, it did exactly what you told it to do. It made it as wide as the column, and it made it as tall as the column.

[00:12:04]
So yeah, that's not really what you meant it to do, but this is where we start. We start with a width of 100% and a height of 100%. Then we're gonna add the new property called object-fit, and we're gonna say cover. And what cover does is, it's gonna kinda zoom in.

[00:12:23]
You can see, there's the coffee packet there, okay? It's doing the best it can to cram this image into the space. If you look at the original image, you'll see that it's blurred a little bit. In the back there, that's what you're looking at. It's gonna try to cram this image into the space and just show the part of it without trying to cram the whole image in there, right?

[00:12:45]
So we've improved a little bit. Then we're gonna say object-position: 20% 50%. This is gonna move the image to the part that you wanna show. And that really isn't the part that I wanna show, but use those numbers for the moment. And then the last thing to do is, here on our article-img-wrapper, we're gonna set the height to 600px.

[00:13:20]
And then that will fit just that portion of the image into that height overall, and that's why we put that div on it.
>> Can you talk a little bit about that 20% and 50% there?
>> Yeah, the easiest way to do this is just sort of to show you.

[00:13:36]
So if I said 0 0,
>> So it's a left to right percentage and a top to bottom [INAUDIBLE]?
>> And a top to bottom, yep. Or if I said 0 100 %, I could have said 100% 100%, Then it's gonna shift over here and show us a different part of the image.

[00:13:57]
And through exhaustive testing, I determined these are the right numbers.
>> [LAUGH]
>> As you know in CSS, sometimes it's just a matter of fiddling with numbers until you get what you want.
>> [LAUGH]
>> What are the other options for the object-fit?
>> You can say contain, and that will contain the entire image in the space occupied.

[00:14:19]
So in this case, it's gonna contain it all, and it's not stretching it height-wise. So it's kind of overrides that height of 100%. And I think there's another, maybe it's fit is another one. Yeah, fit does that in this case. So there's a couple of those, and I gave you a link to this in your CSS projects.

[00:14:40]
Here, if you go to the Hints/Spoilers, I gave you links to MDN, where you can go read up on these and exactly how these work. Okay, cover's the one that we want. Okay, so now the last thing here to do, I had a couple of other tweaks here on this img-wrapper.

[00:15:06]
And what I said here was a max-width of 300 pixels. I don't want it to be too wide, I don't want it going off the page. And I gave it some margin, 1.5rem 1.5rem 0 0. Remember the four numbers? Top, right, bottom, left. TRBL, remember that and stay out of trouble.

[00:15:32]
So we've added 1.5 rem to the top and 1.5 rem to the right. So that pushes it down to bring it in line with the text. Looks a lot cleaner. Pushes it over from the edge of the page, so we have a little breathing room over there. And then the last thing we can do is a grid-specific property for children, justify-self: end.

[00:15:58]
>> [LAUGH] Sorry.
>> Justify yourself, yes.
>> [LAUGH]
>> Yes, it's a wonderful property. And I'm not gonna go into a whole lot about that property right now. But if you Google for CSS-Tricks, grid, you will find this page, and it will talk to you about that. The left side, the left column is all about the parent, so in our case, the article.

[00:16:23]
The right column is all about the individual children and how you can align them in place. So what the justify-self, so you justify yourself here, is going to move your element, but just that element, not all of them, around in space. So that's what we did, we pushed it over to the right a little bit.