Fixing our header for mobile

- [Rik] Currently, I've done my media query, so I've got my large desktop version, I've got a kinda small desktop version, maybe a tablet version, and a kinda like large phone version, but what happens if I've got a smaller phone, so something that looks a little bit like this? So here, you can see that the layout breaks in my header. And again, if I make it really small, you can see this logo doesn't really squash down. So what I'm gonna do is fix this header image and I'm also gonna fix this navigation as well.

So maybe around, where does this starts a break, right about 500-ish. Again, a lot of people ask, "How many media queries should I put in?" Well, the answer is really, it depends on your site and your layout. The more complex your layout, the more media queries you're gonna have. So usually, four, five, six, generally okay to do. If it's anything like 12, then maybe there's a design problem going on here, but generally below six is pretty good.

So what we're gonna do is again, just fix this so that under 500-ish, around about here, we get this layout a little bit tighter. So, what we're gonna do is gonna add one more media query. So this one, 660, we want it a little bit smaller at 500. So underneath it, @media, round brackets, 'cause we're doing a check. We're gonna do max-width, colon, 500px. And then we're gonna do something if it's only under 500. And again, I'm gonna open up these curly brackets 'cause we're gonna do something here.

What do you want to do? Well, the first thing is I wanna fix this image's header. So maybe up here, this is still a little bit too wide. Maybe this is just gonna be the size of the page. So here, what I'm gonna say is my header image, header space img, and curly brackets in here, just fill out the space, doesn't really matter too much. The width of this is just always gonna be 100%. It's gonna be scalable so it doesn't really matter too much and you can see here, this now fits within the grid nicely. The next thing you want to do is fix this navigation layout.

Now, the links by default just go in a line because they're text elements. But we wanna make them go down the page, so we wanna add some flexible layout. So this isn't a grid 'cause it doesn't align in different directions. This is just gonna be flexible, so I'm gonna add in flexbox. So where do I want to add flexbox to? By default we have it on the header, but the header only impacts the image and the nav group.

We wanna affect the links inside the nav group so we're gonna pick the nav to have this layout. So underneath it, we're gonna say nav and do curly brackets. Again, just gonna open them up and notice this is still within this group. So here, what we're gonna add to the nav is gonna change its default layout which is just a novel text layout, and add display: flex;. We're gonna change the flexibility of this. So now what we should see is something that looks like that.

Again, this is wrong. It's trying to squeeze in the gap. Instead, what we want to do is make this go down the page instead. So let's make it go down. We'll change the flex-direction. Which way do we want it to be laid out? Not in a column, not in a row, but in a column. Let's see this. There we go.

We also wanna align it in the middle. So we're gonna align it in two different ways, align it across and align it in the x direction and the y direction. Align items in the center, align, oh sorry, justify the content in the center, so x and y. You can play around with these settings if you like. But we have something that looks pretty good. Now the one thing I might want to do is I have a lot of margin around this page so this actually makes it look a little bit tight.

So what I'm gonna do across the whole page is reduce the body down a little bit. The body's margin. So where did we add this originally? So I scroll back up and originally, we had it on the desktop version up here, and in the media query, we added some here. This is the last place we did it, so we wanna overwrite this even more. So here, I wanna update my body's margin just so I don't have this gap that's kind of quite big around the page.

So let's do that. So again, I'm gonna do this again in a rough order. So body, header, image, nav. Here, I'm gonna do the body. And this is the last media query, 500. I'm gonna change the margin just to be something small. 24, 24, 24, and 24. And this is going clockwise again, top, right, bottom, left. There we go.

Maybe a little more, maybe it's a bit tight on the page. I can start tweaking with this a little more. Maybe 32 allover. Let's put them all in, 32. That might be a little bit nicer. And again, this is up to you. This is something that I would generally work out and test things out. Now again, I'm looking at this on my browser. The next thing to do would be to check this on your phone. So again, what I'm gonna do is just show you how to check this on your phone so make sure it looks good, and if there's anything wrong, we'll fix it.