Responsive Layout with Media Queries

[00:00:00]
>> Jen Kramer: Now that we have our mobile layout complete for the bio section of our website, let's add a media query and make this work better for desktop. So how many media queries do you need? Anybody have any idea? How many media queries should we add?
>> Speaker 2: Maybe one for now.

[00:00:18]
>> Jen Kramer: One for now? Sure, we'll add one for now, the right answer is, however many media queries it takes to make it look good. Your graphic designer is probably going to tell you exactly how many that is. They may be in different places, but in this particular case, we're gonna put in our media query about 750px, and we're going to change our layout at that point.

[00:00:39]
So, I'm currently, once again, look for the little number down at the bottom of your screen here in CodePen to tell you the size of your screen. And I am going to move mine to just a little bit more than 750px. This is your number one trip-up point as you're working in CodePen.

[00:00:58]
You start writing code and it doesn't work. That's because your display window is smaller than your media query. Of course, it doesn't work, so I like to set this first so that my code will work once I type it in. And I'm gonna scroll down here to the bottom and I will add my media query.

[00:01:19]
And so my media query is going to be @media and I'm going to say my min-width is 750px, minimum width cuz we're working on mobile first. So we wanna work with minimum width media queries, our previous styles, everything we've written from line 96 and going up. All of that will carry into our media queries, these will just be our overwrites.

[00:01:49]
So here what I will do is say for my .wrapper style, all right, I'd like a little bit more padding on this, especially to get it off the top of the page. So maybe I'll say padding of 5rem. We had 1rem before on mobile so now I'm gonna give myself a bit more space cuz I'm on a desktop configuration here, and then I'm gonna make some changes to my main article.

[00:02:16]
Remember, this is what we're working with now for our design. We need to have how many columns of stuff?
>> Speaker 3: 2 hind that.
>> Jen Kramer: Now we need 2 columns of stuff. So before we had 1 column with everything stacked on top of each other, we need to go to 2 columns.

[00:02:34]
So I'm going to say for my main article, we are going to go to our grid template columns. 1fr, 1fr or repeat 2 column 1fr, however you wanna type it, this is shorter for just 2 columns, all right. And then maybe I will, notice that these are now top aligned here, okay.

[00:02:59]
Maybe I want those aligned on their centers, so align-items center. And then my text, of course, is center aligned, so I wanna overwrite that text-align left. All right, and then for the image itself looks a little bit odd, kind of cut off that way. Let us turn all of the things that we did to it off in order to show us the full picture now.

[00:03:32]
So we can make changes here to .main-article img, so I'm going to say max-height of 400px. This will prevent our image from getting overly large. So we'll just go by height, the width will scale proportionately. For my margin, I wanna push this all the way over to the right.

[00:04:00]
So what I can say is 0, 0, 0, auto. And what this will do, remember those four numbers are top, right, bottom, and left. So we're gonna have no margin on all of those until we get to the left side. The left side is auto that will push it all the way over to the right.

[00:04:25]
It won't really show so much at 750px. As the screen gets bigger, you may see it push over more to the right. And again, on your larger screens at home, as you're following along, you may see this a bit more dramatically than we do here on my smaller screen.

[00:04:42]
Okay, and then to turn off the other things that we did to this picture, to crop it, we'll say our object-fit is none and our object-position is none. And our height is auto, and our width is auto, and our overflow is auto, [LAUGH]. So those are all the ways that you turn off all of the things that you set before in order to get your basic image back.

[00:05:21]
For object-fit and object-position, they are not auto, you can go look them up on MDN. Auto is not a valuable or a valid value for those particular properties. You need to use the word none, and then auto works for everything else. Notice that you might have a max height of 400px, but a height of auto, how do those two things work together?

[00:05:43]
Anyone have any ideas? Does that look weird to you? Okay, so what we're saying is that the height, it can be automatically adjusting. All right, especially as we get smaller and I can't make this much smaller. You can kind of see she's getting cut off, like her hands, they are cut off, the laptop is cut off, right?

[00:06:02]
But as the screen gets bigger, there is a maximum point, and she doesn't get any bigger after that, all right. So that's the point of setting this up that way, all right, so she can get proportionately a little bit smaller and maybe cut off from the bottom a little bit.

[00:06:22]
So that's what that little bit of code is doing. All right, and then the last thing that we need to adjust here are our icons and currently those are set to justify content center. So we're going to just change or justify content to flex-start, and that should push them over to the left, and they should be lined up pretty well.

[00:06:48]
All right, so a couple of other tiny little things that we can do here. We're here at the start of my media query. Currently, my font size is 1rem. We set that back up at the beginning of our style sheet up here and the body style somewhere here in the beginning to our base font size.

[00:07:08]
And our font size is 1rem. I would like my font size to be generally bigger when I go to desktop. So here's one of the cool things that we can do with our variables inside of a media query. We don't need to go back and make our body style.

[00:07:24]
We don't need to do this. So, now my body style will be font-size, whatever, we don't need to do this. And what we can do instead is simply say, root style, we're going to instead change our base font-size. So we're just changing the value of the variable, you're probably familiar with this, to 1.1125rem, and that should scale everything proportionately.

[00:08:02]
So you see how everything on that page scaled up just a tiny bit. The h2 scaled up a little bit, the h1 scaled up a little bit, the paragraph scaled up a little bit. When you go back to your mobile dimension, everything scales down proportionately to a slightly smaller size.

[00:08:20]
How cool is that? Pretty fun and amazing, right? Very cool. Very cool, very cool. And then the last thing I'm going to do, because I'm super picky, is my h1 here.
>> Jen Kramer: All right, so if you take a look here at the left side of the F in front going down to the B, they don't quite line up in a perfectly straight line and the graphic designer is screaming at me, right?

[00:08:52]
We've all been there. So we can add this here in our CSS as well. We could just say our margin-left is -3px, and that will pull this over just the tiniest little bit, [LAUGH]. And now we have a nice straight left side margin, and our graphics designer is much happier.