Responsive Layout with Media Queries

[00:00:00]
>> What of if we use min-width?
>> Why don't we use min-width?
>> min-width, yeah.
>> I think we can, so let's try to set it. On here, right now, this has a width of 310. Let's say we want a min-width, I wanna put it on all of the wrappers, they all get a min-width.

[00:00:29]
It was 310, let's set it to 380, right? So we can. I think at a certain point, so it stopped at 310. You know why it stopped at 310? Because that's what we defined as the dimensions for our speaker photo. So that's why we're getting that. You can use min-width, absolutely.

[00:00:51]
But now, I'm fine with it stopping at 310. What we wanna do now is make sure that these are not getting truncated. So this is where our media queries are coming into play. So we can actually change our grid layout, right, when the screen is too small. So when the window is, let's say, when you have the dev tools open and grow, and you resize the window you can see in the top right, you're seeing those dimensions of the browser window.

[00:01:16]
It makes it a little easier to debug, right? So technically, it gets cut off at like 977 pixels, but it's not nice. So I'll say, at 1,000 pixels, let's make some adjustments to our grid layout here, right? What does that look like when it comes to media queries?

[00:01:35]
Well, let's test it out for a second here. We use media queries like this with the @media directive. We say, let's say max-width. And I actually, I have a couple slides that illustrate this. Now, we're in the responsive layout, we're almost done. We're almost done. Media queries allow us to apply styles based on device type or other characteristics.

[00:02:02]
So some of the ones that you might see, aspect ratio, device orientation, whether that's landscape or portrait. There's a prefers-reduced motion media query. This is fantastic for accessibility for users that they can't look at things online that have a lot of moving pieces, right? It makes them motion sick.

[00:02:20]
Prefers-color-scheme, if someone needs a specific color palette to be accessible. And then min-width and max-width. Min-width and max-width, I always get them confused intuitively. They just don't make a lot [LAUGH] of sense to me. So I've illustrated this example. So we've got @media, max-width 800 pixels. The styles will be applied if the browser viewport is less than or equal to 800 pixels, right?

[00:02:46]
In contrast, min-width, 800 pixels will apply styles of the browser viewport is greater than or equal to 800 pixels. And we don't have to limit ourselves to just one media query, we can use the and keyword to apply multiple media queries. So let's go back here. We want to have a new grid layout when we reach that 1000 pixels, right?

[00:03:19]
So to illustrate this concept, let's try this. Let's say max-with 1,000 pixels, let's see what that does. Let's just change the body color. Let's say, body, background, blue. Let's make it real obvious when we hit that break point, all right? [LAUGH] Body-secondary is overriding that. Specificity issues, right?

[00:03:46]
I'm trying to set a style using a type selector, but there's something more specific that's overriding it. So, Let's just copy that name, right? It's body-secondary, let's try that. I'll just type it. Body--secondary, well look at that, specificity. This is why it's important? Right, so now, when we hit a width on our viewport that is below 1,000 pixels, our body is blue.

[00:04:21]
There is an alternative to using max-width here. What we could do is say, width is less than 1,000 pixels. This is a little easier, at least for me to read personally, and that also works, right? So obviously, we don't wanna change our body color to blue here. So let's go ahead.

[00:04:41]
And my inner, this is in the base file. I'm gonna put this back in speakers, cuz it was not a file issue here, right? So what I wanna do instead, if I hit this viewport, I don't want two cards per row, it's too crowded. So let's just do one per row.

[00:04:59]
So all we need to do here on our speakers wrapper, which is where we've defined our grid template columns. Instead of two columns, let's just say it's one. Okay, look at that. So now, anything lower than 1,000 pixels, now we've got one column. So I wanna quickly address, someone in the chat brought up a really great point that the first card here, the first wrapper, there's something going on spacing-wise with the name and the company.

[00:05:32]
So thank you for noting that. It seems like I forgot to add the class name to the first name element, so I'm gonna go ahead and do that. Speaker, name, and thank you to whoever noticed that, because I did not. Everything looks pretty good now. Okay, we are in the home run here if you stuck with me thus far.

[00:05:54]
Even if you haven't, thank you. Right now, we're going to finish up this page by making it responsive. So we've seen how we can change styles depending on the window size using media queries. Let's make some additional tweaks for smaller viewport sizes, right? So, Let's see here, at around, click go back to our homepage.

[00:06:25]
This is a big font, we're getting a smaller viewport here. So around 1,220 pixels, I'm gonna go ahead and change this port size. So back in our home file here, We open Home, Okay, back in our home file, I'm gonna add some media queries to make this font less abrasive on smaller viewport widths.

[00:06:53]
So media max-width, let's say 1,220 pixels. I want that main heading to be a little bit smaller. So we change the font-size here to 70 pixels, right? Okay, that's looking a little bit better. So we've got the big jumbotron font here, 1,220 pixels, it's a little bit smaller.

[00:07:17]
Okay, let's keep going until we break things. This is how I designed my responsive sites. I heard this from someone, but it was basically like, make the window smaller until something breaks and then fix it, right? So this is all looking fine, it's looking fine, okay, it's still scaling.

[00:07:34]
Okay, maybe it's getting a little bit crowded in here, so let's change this again. Let's make this font size a little bit smaller now. Let's add another media query. Max-width, let's say, 590, let's see how that looks. We're gonna have the same selector here for the main heading, and instead of 70, let's make it 40.

[00:08:03]
Okay, so smaller, is this perfect? No, but just remember, I'm not a designer. So someone [LAUGH] would probably come in here and change that, but this is all really just for the experience, right? Additionally, at this viewport width, that subheading is now a little bit too large, so I'm gonna change that as well.

[00:08:21]
So we'll do .home .main_sub-heading, we'll make this font-size, let's say, 24, right? Okay, not terrible, and our base file, which is where we've written our buttons, we obviously need to do a little bit of work, cuz that's looking kinda silly. So back in our base file here, Let's add another media query.

[00:08:48]
Let's go back to the 1,220 pixels, so max-width 1,220 pixels, right? That's where we had our first break point for the header text, right, 1220. Those buttons are taking up way too much real estate, so let's fix that. Let's say, let's change the font-size first and foremost to 24.

[00:09:12]
Okay, let's also change the padding. Now that the font is smaller, we maybe don't need so much padding inside that button. So let's change that. 0, top and bottom padding, and 32, left and right, right? Okay, looks a little better. Last thing I'm gonna do on those buttons is just give it a smaller height.

[00:09:31]
They don't need to be, I think it was 100 before, they don't need to be 100. That looks a little bit better, fits with the viewport a little nicer. Also, that arrow is ginormous now compared to the text. So we'll just go ahead and target that as well, make that a little bit smaller.

[00:09:47]
So button image, let's give it a width of 20 pixels, that's a little bit better. Okay, so let's reduce this a little bit. All right, I had around a little over 800 pixels or so. Let's reduce the padding around our main content. It's kind of a little bit too much for the size, right?

[00:10:16]
So let's just add this in here. Max-width, So let's just say 815 for the heck of it. On our main content area, let's change the padding to 75 pixels and see how that looks. Okay, that looks a little bit less chaotic. For the buttons, one last thing, at this smaller viewport, let's go ahead and change it.

[00:10:49]
Change the dimensions a little bit here to fit with the viewport width, right? Let's say, @media(max-width), say, 700, see how that looks. So button, let's reduce the font-size, font- size, let's put it. So at a max-width of 700 pixels, let's change the font size of our buttons to 16 pixels, and let's go ahead and give the margin top to 24, so 24 pixels, right?

[00:11:26]
So it looks good there. Admittedly, this looks kinda silly, doesn't it? Why does that look so silly? Now, I'm wondering what I was doing at the time that I was writing my notes down. So we're gonna go off script, I'm gonna make this look a little bit nicer.

[00:11:44]
This looks a little bit silly. You know why? Because I didn't actually finish what I was supposed to do. So the button container obviously has a massive margin that looks great at larger viewports, but not so much here, right? And if we go back to our design for a second, Let me scroll this out.

[00:12:02]
If we go back to our design, you notice here our buttons are no longer sitting side by side, but they're on top of each other, right? So that's the last thing that we'll do for this home page. So in here, let's move them. So remove that top or reduce the top padding on the button container.

[00:12:23]
So margin-top 32, right? Okay, that looks a little bit less chaotic. And we want them to be stacked on top of each other, and they're in a flex container. So what we can do is just say, flex-wrap: wrap. There we go. They are not flushed with one another though, let me get rid of this.

[00:12:50]
In our design, they sit flush with the text on the left here. So I'm gonna go ahead and fix that. Here's where it looks a little weird, right? It's because I set, there's a margin being set here, that's a typo on my end, right? I don't wanna set margin on all four sides of that button, I just want it on the top.

[00:13:14]
So there we go. And now, there we go. Now they float on top of each other. Now, of course, like I mentioned, I'm not a designer. This probably could use a designer, but this shows how you can add different viewport widths. Go ahead and change your font size and change the layout to fit that.