Media Queries with Grid Layouts

[00:00:00]
>> All right, so we're up to Chapter 6, and we're at part 6A, working with max-width media queries. And if you open up your opening CodePen here, we are here on Mars, once again. And this particular layout looks totally awesome here at 980 pixels, but really, not at anything smaller than that.

[00:00:21]
So it's time to fix this and make this work at smaller sizes as well. And we're gonna use desktop media queries cuz we've already laid this out for desktop. And now we're gonna add some mobile versions to this. So one of the tricks that I like using as I start working, inside of designs like this, I need to figure out where exactly am I gonna place my media queries.

[00:00:47]
And what are the nice features of CodePen if you see down there at the bottom, there's a tiny little white pill that will tell you the size of the screen. And that is the size of the image just display over here on the side. So you can sort of scrub back and forth until you find a spot where things kinda look like they need to be updated.

[00:01:09]
In this case, this is pretty fixed width, it just starts to scroll off the screen. So what I am going to say is, it's gonna be 700 pixels. This is gonna be a spot where we're gonna need to start making some changes. The very first place we need to make a change is right here on line number 5.

[00:01:24]
The reason why this is all very, very static and it scrolls off the screen is that, we have a fixed width that's set right here on line 5. We've just said the width is 980, so it's never gonna be anything different. It's never gonna be smaller than 980, it's never gonna be bigger than 980, it's always gonna be 980.

[00:01:43]
Let's change this to max-width of 980. So it will never get bigger than this, but it can definitely get smaller. So as we start making this screen smaller, then we can decide exactly where we want that media query to happen. At some point it starts to look kind of ridiculous.

[00:02:02]
Yeah, okay, so I picked around 700 pixels as I start to lose details here in these pictures. Let's make this a little bit different. What I'm gonna do is scroll on down just after style number 5 here. We'll put in a bunch of returns so you can see what I'm doing.

[00:02:26]
And we're gonna set up a media query. So this is @media. And then we're going to say max-width of 700 pixels. Okay, so in other words, what does this mean? If I said cuz you guys have not seen media queries in action before. If I said body background-color, red, what dimension is my body background color going to turn red?

[00:03:02]
So if my screen is at 950 pixels, what color is the background of this web page?
>> Black.
>> Black, if I'm at 702 pixels, what is the color of this web page background-color?
>> Black.
>> Black, if I'm at 698 pixels, what is the background-color of my web page?

[00:03:23]
>> Red.
>> Red, okay? Notice that our media queries come later here in our design, and that is where this stuff is gonna be applied. As I make my screen smaller, and this is not working because I have my body background black down here at the bottom. And guess what, it's overriding what I have before.

[00:03:48]
So if I grab this code here, I'm going to cut it, and I'm gonna put this up at the top of my screen. Now my media query can override it, and, whoa, that red is very red, okay? You're definitely on the red planet now. Here we go. Make sense?

[00:04:11]
So that's how media queries work and in their simplest format. I don't know why you would ever wanna do this, but you can, okay? So instead of doing that, we're gonna do something different. What I wanna do instead is, I just wanna stack these images one right on top of the other.

[00:04:29]
So what might I say inside of my media query so that when I get to these smaller dimensions I stack my images one right on top of the other? What would I say?
>> Do you do grid container and change the number of columns?
>> Correct, so I can say, .grid-container.

[00:04:53]
And then I could just say, grid-template-columns: 1fr Okay, I don't have to say all of the other stuff, I don't have to say display grid. I don't have to say any of the other things that I had, all of that will carry down from what I had before.

[00:05:12]
Instead, what I'm going to do here now is have a single column. And sure enough, my images stack on top of each Each other very, very nicely, except for Mars. What happened to Mars? Mars is gone. So what happened to Mars? Does anybody have an idea? Well, remember outside our media query, we have a whole bunch of these specifics, right, where we placed all of these images, and they're still going to those places.

[00:05:46]
So Mars is gone because, yeah, it's somewhere off the screen, entirely. So to bring Mars back, we're gonna need to make some changes here. And what I'm going to do, I'm gonna copy styles one to five. And I'm gonna paste them here into my media query, okay? And now we can override these.

[00:06:18]
And probably the easiest way to do this is just to change my numbers to auto, because all I wanna do is make these images stack on top of each other. So one will become auto, two will become auto for the grid-column, auto for the grid-row. And yes, you can absolutely recombine a lot of these styles into a single style that just says grid-row: auto grid-column: auto.

[00:06:44]
But for purposes of documentation, I'm gonna keep these all broken out separately, but we could say grid-column: auto.
>> You took one through five in copy of that.
>> Yep, I took classes one through five and copied and pasted them into our media query. Four will be auto and auto, five will be auto and auto.

[00:07:18]
Okay, now let's see if we have five images now, one, two, three, five, sure enough, there they all are. Okay, so when I make my screen bigger, we go back to our grid based layout where we have multiple columns and spans. And when I make this smaller then they stack on top of each other, one image after another.

[00:07:46]
By keeping grid turned on in this dimension, we are keeping the ability to reorder our images this particular way. Ideally, you're gonna wanna put your content In mobile order by default. And the reason why is because then screen readers and search engines will come in and just read that content from top to bottom, whereas the display of the page, it may be all over the place in different spots.

[00:08:12]
But we want our search engines and our screen readers to be able to read that content from top to bottom in the order in which we wish to present it. Makes sense?
>> Do we care about portrait versus landscape?
>> Okay, so you mean a media query for portrait and a media query for landscape?

[00:08:29]
Is that what we're talking about? So ideally, what's gonna happen here is we're very concerned with the width of the page, because the height of the page is just scrollable. So if we have a small, let's say we're looking at this in portrait mode, we'll see, I don't know, the first image in the top of Mars there, and we'll just be able to keep scrolling to see the rest of the images, right?

[00:08:53]
If we're in portrait mode, we're gonna see just what we see here. And then we're gonna scroll to see the rest of the images.