Moons of Saturn: Medium Width

[00:00:00]
>> So, the next thing that we're gonna do is we're gonna take a look at the 750 pixel break point. And so this is between 750 pixels and up at this point in time, we're going to have our featured card over here on the left side. We're going to have two cards next to it.

[00:00:20]
Notice those cards are missing their paragraphs of information, protip, okay? And then underneath of that, we're gonna have our other two photo cards next to each other, and all beautifully lined up. And then finally down here at the bottom, we are going to have three headlines. There are going to be horizontally next to each other, okay?

[00:00:41]
And what I've said here is that you may find you want another media query around 875. And the idea here might be just to tweak things a little bit. Things may start looking a little bit wonky in terms of their layouts. Putting in a second media query here will allow you to tweak things a little bit and make it look prettier.

[00:00:59]
Okay, well, next thing to do, see if you can make this particular layout happen. Remember, these two cards over here have a slightly different treatment in terms of their content than the cards that are down here on the bottom. All right, so hopefully you were able to work through that next media query and get us to the next design as shown here.

[00:01:25]
We're going to try to fit our picture of Mimas and the Death Star over here on the left hand column. We're going to stack up two cards. Notice that they're missing their text underneath. Stack those up on the right hand side, and then we're going to have the remaining two cards underneath.

[00:01:44]
And we're going to have our three headlines in a row underneath of that. So let's go through that particular layout. So I'm going to start with what?
>> At media and min-width 750. At media and min-width 750 pixels. So at at least 750 pixels, do these things. I need to change the layout of my page.

[00:02:13]
So I'm gonna go to .photo-cards, and I'm going to say, grid-template-columns, and I'm going to say repeat (4, 1fr). So I'm gonna have four columns going across the page. That kinda gets us close, actually, just like that. But obviously, there's a little bit more work to do here.

[00:02:39]
And then I'm going to say grid-template-rows: repeat, 3, auto. It's actually what we had before. I'm kind of repeating myself a little bit. And I'm going to add to this a border-top of 1 pixel solid ccc. That will put one line across the top right here. Okay, so we're putting it on photo-cards.

[00:03:06]
It's on the outside, so this will give us a big line across the top of the page. Okay, then for our cards themselves, we want them to just have one column at this point in time. So grid-template-columns, 1fr, one single column. Thank you very much. We're gonna continue, though.

[00:03:29]
It looks like it, quote, didn't work. And the reason why is because earlier, we assigned positions for our h2s, for images for our text, and so forth. And so sometimes when you make this change, it looks like it doesn't work initially. It just means we have a little bit more overriding that we have to do.

[00:03:48]
And then I'm going to say my grid-template-rows within my card, I'm gonna make use of minmax here. Minmax, 0, 0.7fr, so between 0 and 0.7, minmax, 0, 1fr and auto. So I'm really spelling out exactly how big I want each row to be. And this has to do with our sub grid and making sure that the layout works here.

[00:04:23]
Okay, then, For my first card, my first child, we're going to say its grid-column is 1/4. So that is going to span it over the first three columns. There we go, spanning over the first three columns. I have one card remaining over here on the side. So I actually want two stories over here on the side of this card, so I'm going to need to say grid-row 1/3.

[00:05:01]
And that'll give me two stories over on the side. My second card, nth-child 2. I'm going to say our grid-column is 4/5, and my grid row is 1/2. So that's gonna put my Titan article over here on one side of this, and then grid, sorry, card nth-child 3.

[00:05:43]
We're gonna say grid-column 4/5, and grid-row 1, sorry, 2/3. So, now we have our two cards stacked on top of each other. See that I've got Titan. And I've got, I think it's Enceladus next to it at the bottom. And my initial card is spanning all the way down that.

[00:06:13]
They look kinda long. And the part of the problem is that these two cards still have their text displaying. In our mockup, we showed that there was no text displaying at that point in time. The other thing, of course, is that our layouts are not quite right here.

[00:06:29]
We've got our headline next to the image. We actually wanna have the headline on top of the image. So we have some more tweaking to do there. So I'm gonna continue on with my nth-child 2 and 3 here. You could combine these as styles here for both of those have got images.

[00:06:48]
So we're gonna say .card nth-child 2, .card:nth-child 3. Well, the word is Titan and Enceladus. What are we gonna do with their images? img, img. We are going to put their images in grid-column 1/2, okay? So now we have this weird thing going on where we have the image, we have the paragraph, and then we have the heading, and then we have the button.

[00:07:30]
Isn't grid fun? Okay, and then we need to deal with that text issue. So, this is actually a very similar looking next style. I'm just gonna copy that one. And I'm going to change this to .text. So this is the paragraph, and I'm going to say display none.

[00:07:58]
And that'll get rid of those paragraphs of text, okay? So now I have my two cards stacked on top of each other, and they are next to the one here with Mimas. Okay, now for the fourth and fifth child down here at the bottom, can anybody tell me what's going on here?

[00:08:17]
So we've got these sort of smashed over here on the sid. And in our design, we wanna have them kind of stretching across the whole area here. So what is a change that I need to make to these two cards to make them stretch across this whole area?

[00:08:35]
Can you kind of describe what I need to do?
>> 2 out of 3 instead of, sorry, 1 outta 2 instead of 2 outta 3. The fractions are wrong.
>> Yeah, there's something going on with the fractions here. So right now we have each card taking up one column.

[00:08:51]
These bottom two cards, we need to have each card take up two columns. And that would stretch this all the way across the page. Makes sense? Okay, so let's write some styles to do that.
>> 2 out of 4 instead of 1 out of 3.
>> Yeah, yeah, so card nth-child 4.

[00:09:12]
We're gonna say grid-column 1/3, that will span us across two columns, yeah. And grid-row 3/4, that'll put us right where we are right now. It's also going to link us into the subgrid, and we'll also address that grid-template-columns, subgrid. There we go. And then we're gonna do basically the same thing for our fifth card.

[00:09:55]
The numbers are a little bit different. We're gonna say 3/5 instead, and subgrid. So, once they're both on the subgrid, then they lay out really, really nicely. We have our two columns, we have our headline next to the image, we have our paragraph underneath, and our buttons and everything is all lined up and looking pretty.

[00:10:17]
Yeah.
>> Sorry, I definitely remember asking about this yesterday, but I guess I thought that grid-column meant that it was starting at the third column and continuing to the fifth column. Right, so if we were counting lines here, all the way over here, just to the left of the first card, that's line number one.

[00:10:41]
>> Lines, okay.
>> Line number 1, in the middle would be line number 2. In between here, this is line number 3. 4 comes in between these two, and 5 is at the very edge. Yeah, remember, you can always look at your developer tools and it will show you all of the numbers right there in your developer tools.

[00:11:02]
Okay, and then the last part here are these headlines down here at the bottom. We wanna put these all right next to each other in a row. So let us add the styles there for that. We're going to go to additional. That is the class of my ul there.

[00:11:22]
I'm gonna say padding 0. We're gonna switch it over to no padding at all. We're going to say display grid, grid-template-columns, repeat, 3,1fr, okay? So that puts them all next to each other just like that. There they are. And then we can give them a little bit of a gap, column gap, 1rem, and we can give them a border on the bottom, 1 pixel solid ccc.

[00:12:09]
And then for the li's themselves, .additional li. All of those li's, you're not really gonna be able to see it right now, but what I've got is I've got sort of three lines down here on the bottom underneath each one of these items. So what I'm gonna do is turn that off by saying border-bottom none.

[00:12:39]
That will get rid of those three individual lines, and it will be replaced by the one ul line that I've got there, so that will be continuous instead of having spaces in the middle of it. And I'm gonna add a border-right 1 pixel solid ccc. And if I spell additional right, everything will work.

[00:13:05]
Here we go, okay? And then finally, for the last child, we may not wanna have borders associated with it at all because a lot of these are repetitive. So, we could always just turn them off by saying additional li last-child. And we can say border none. Okay, [SOUND] so we made it through that one.

[00:13:38]
How are you doing so far, okay? So this is currently at around 750 pixels. One of the things that happens on our way to 1000 pixels, if you watch particularly these bottom two cards here, is as the screen gets bigger, what's gonna happen is our text starts to slide behind the pictures, okay?

[00:14:05]
That is not something that we really want. So around 875 pixels, determined by just kinda sliding this around and taking look at numbers, around 875 pixels, we many wanna add another media query. And this is gonna be a min-width of 875 pixels. And here for our card, we're gonna say our grid-template-columns are 1fr, and our grid-template-rows are gonna have different heights than what they had before.

[00:14:52]
So before we had, Up here, we had one set of heights for our columns, now we're gonna change those, and I'm going to set them to be, minmax of 0, 1fr, and auto. And that'll fix that particular problem. So, as we grow those particular cards, they will continue to not be behind the picture, which is what we want so the text continues to be readable.

[00:15:36]
So never be afraid to add some of these little minor media queries in here just to make those little tweaks along the way. You don't have to stick with just the media queries that you're given. If you need to make little minor media query tweaks along the way to keep your design looking good, you should absolutely do that.