Responsive Projects Layout

[00:00:00]
>> Jen Kramer: So we're on to our media queries, and one of the things is that when these images are so nice, and they look really bad when we are at 750 pixels, when they get small. So just to show you what I'm talking about, what I'm just gonna do here inside of my 750 pixel media query, let me just show you what I'm talking about.

[00:00:28]
So if I say, project and I say, grid template-columns, 1fr 1fr, and I have my screen at 750 pixels, okay? You'll see how small that image is, I actually like the way that image looks here better. The images are really important to this portfolio, and I actually wanna keep them big for longer.

[00:01:04]
So one of the things that I'm going to do here is, write a different media query just for the project section, @media, min-width, 850 pixels.
>> Jen Kramer: Okay? So now this image isn't going to go to its smaller side by side until I hit 850 pixels, okay? So the the point of telling you all of this is the following.

[00:01:36]
Just because you have a breakpoint at 750 pixels, does not mean that that is necessarily the right break point for everything in your design. You are totally allowed to have different break points for different elements and images that are there on your Webpage. There's nothing wrong with that at all, it doesn't actually cost you anything in terms of performance, media queries are really very trivial in terms of performance.

[00:02:04]
And if the design is better, why not do it? So that's what we're going to do here. And I will show you the rest of the things that we're going to put in here, in my 850 pixel media query. We'll need to make sure that our text is aligned left, we'll put that in our main style.

[00:02:33]
And let's see, what did I do for my project, style before? My project style before had a gap of three realm, I'm gonna keep that, I'm not gonna change that, okay? Then I'm going to add .project img. And I'm going to say, grid-row auto, so that'll flip these back around, so that the image will wind up on the right side, which is where we had it in our original design here, so they're now next to each other, right?

[00:03:17]
It doesn't take us a whole lot of code in order to get what we want. Now, the last part of this is, these images down here, or, sorry, these tags down here on the bottom that show us our technology. Right now those are aligned in the center, so we'll want to align them to the left side of the page, so this is gonna be .project ul, and we're gonna say, justify content, flex-start.

[00:03:50]
And that should push these over to the left side of the page, okay? And then, as you make your screen bigger, those will flatten out into a single row, okay?
>> Jen Kramer: And that's what it will look like there on desktop, pretty good, yeah, yeah. And then when we go back to a smaller screen size, then they'll stack on top of each other.