Media Queries with Grid Exercise

[00:00:00]
>> So, depending on what syntax you're comfortable with, here are some syntaxes associated with that same Marsh collage that we just went through, there's the span and the area or the number. What I want you to do is fork it, and then write a desktop first layout for this design using media queries.

[00:00:18]
Exactly what we just did, just go ahead and do it now with a different syntax. And if you are feeling a little bit bored and you wanna make this a little bit more difficult, see if you can reorder everything and make this mobile first instead, so with a min with media query instead of a max width media query, all right?

[00:00:41]
Well, hopefully you were able to address a particular issue, and we have the moon pictures here I had said the Mars picture, that was a mistake, it's the moon pictures. And so, I took the span syntax here, append for the moons of Jupiter, and what I have here is a layout that goes like this as we get smaller.

[00:01:08]
So we went from stacking everybody on top of each other just like this, one on top of the other, and as I make this bigger, then we've got the text next to the moons, and then we have this kind of sort of a layout like this, okay? So how did I make that magic happen?

[00:01:30]
What I've got over here on my content in the CSS here, basically this first part you kinda know already in terms of the layouts and how we pull things out and make them go to different parts of the page. So the interesting part of the media queries, I have a max width media query at 750 pixels, and this is going to stack everybody one on top of the other.

[00:01:55]
I have to turn off the positioning for the third child, the Europa moon, and I have to turn off the grid column for the last child, which is Ganymede. And when I turn those off, then things stack on top of each other very nicely. Okay, then the trick that I use when I get to 500 pixels, and it's one that I use often, is I just turn off grid altogether, so I just set it to display block.

[00:02:21]
And so block, of course, is the figure default behavior, it's what is set in HTML by default. And when you set it to display block, there's nothing else to override, you don't have to turn off grid template columns, grid template rows, grid column, grid row, you don't have to change any of those things.

[00:02:39]
We've just neutralized everything with just display block, and now everything will stack on top of each other really well. The one thing you will lose when you make everything stacked on top of each other is the space in between each of these items, because you also turn off your grid gap.

[00:02:55]
So, what will happen instead is we need to add to this a margin on the bottom of something like 2rem, and that will give us a lovely space in between each of these, so that they aren't all smashed together, okay? So this is a solution, I was very nonspecific about what you should do in terms of making things look different with media queries.

[00:03:17]
It is very likely your answers are different, possibly very different than mine and that's totally cool. If things look different at all these different breakpoints, then you have gotten the whole point of this particular assignment. Any questions at this point in time?
>> So, as of right now, the way you kinda described it is let's say you have four breakpoints at 500 pixels 600 pixels, 700, 800.

[00:03:46]
>> Great.
>> You'd have to do a media query for each one, is there a way to combine them into one media query that's [INAUDIBLE].
>> If you want changes to happen at each of those, then you have to have a media query for each one of those.

[00:04:01]
And it could be that you're just changing one tiny little thing, right? I just want the font size to go down this little bit, then you need a media query for that. You may have other things inside of that media query, but it doesn't have to be. It could just be that one tiny little thing, and then your next media query, maybe that's got ten things, and the media query after that, maybe it's only got two things.

[00:04:25]
And that's totally cool, the whole page doesn't have to change.