Fixing the header layout

- [Rik] So one question we get a lot as part of SuperHi is, "Where should I actually add my media queries?" So you may notice, in here, we have a little bit of faded one about iPad portrait size, so maybe what we do is, kind of, fix it to that and say this is when we add media queries. But for me, it's based on when the site breaks. So for instance, I like to do things based on eye and design rather than doing it for set sizes, and the reason for that is, let's say, Apple come out with a brand new iPad at a different size, which has happened in the past.

We don't want our sites to break. We want to do it based on our eye and when we want to change things. So here, I might want to change things around this point. I can do a size on the screen of 920. Maybe what I want to do is make my layout go down the page instead. So this is what we're going to do. We're going to add a new media query in here for 920 and make this, rather than go across, go down the page.

So we're going to change the layout. So we've already got one media query in here, and this is for this 12-48. So we did this 11-20 plus 64 on both sides. So we just did a little bit of math here. What we're also going to do is add a brand new media query. Now, I like to do my media queries in order of size, so this is desktop, this is, kind of, like, small desktop. The next thing we want to do is, kind of, like, tablet-size, I suppose.

So, kind of, decreasing each size. So here, what I'm going to underneath is, '@media()'; the max width of this is what we decided, roughly about 920px. No spaces in 'px', remember, and then we're going to do something. So the first one is just for when it's below this. This code is going to run- if it's, say, like, 900, or 600, it's going to run all of this code and this code as well.

So just to give you a quick example, we're going to add, "body", background color is red. Let's see how that looks. This is not what we're going to do in the final one, so we still have our layout working there. Flicks down and it does it for both. So when we hit something like 600, this will do both media queries. If it's between these two, it will just do this stuff.

So it's kind of like two smalls bridges each time. Obviously, we don't want to do background red on the body, we actually want to change the layout of our header. Where do we change the layout of our header? So, we need to look at where our header was laid out. I'm going to scroll back up the page and find my header. So my header, up here somewhere, was using display flex. We did align items in the center and we did justify content to space them apart. What we want to do is do this down the page.

So by default, the flex direction is across. We're going to go down the page instead. So the first thing we're going to do is change this header. So we're going to pick the header and then do something to this header using curly brackets. Then we're going to open it out and we're going to keep it as a flexible layout, which is totally fine, so we don't need to write 'display flex'. This is already on. The only thing we want to put in there is anything we overwrite.

What do we want to overwrite? We want to overwrite the flex direction. The default is a row; we want to change this to a column. Now, you can see this in action here. As soon as I hit 920, it changes from this... down the page instead. So that looks pretty good. Now, of course, there is a bit of spacing and margin stuff going on here, so let's actually fix this. So how do we add some space between Portfolio, About and Contact, and 'Aria Oslo' above it? We add some margin.

So here, what we're going to underneath is, we need to find where we've changed the margins of things. So, how do we do that? Well, we don't have any in here at the moment in our header, we don't have any margins in our nav, we don't have any margins, so we can add some. We don't need to overwrite. We can also add styles as well. So you want to do this again in this media query. I'm going to open this up, still within my media query, I'm going to add a navigation, I'm going to pick it and do something to it.

What do we want to do? We want to add some margin. Just to the top, we're going to add 16 on the top and none on the right, none of the bottom, none on the left, going clockwise from the top. Let's have a look. Is this a good space? Yeah, it's looks pretty good. Maybe we'll do 32 just to kind of increase that. Maybe 24, maybe we'll see how that looks. Again, we're designing it by eye.

That looks pretty good. We also might want to make this image a little bit smaller as well. So how do we go about that? Well, here, this is the headers image, so let's see if we have anything up here. Maybe we have something already... and I don't think we do. So how do we do that? We're going to add a new style. We don't want to change all the images, just the image in the header.

So we've got to select the header, then the image. So underneath here, we're going to select the header. Then a space, the image inside the header. Then we're going to do something to it using curly brackets. What do we want to do? Well, maybe we'll give this a width. Maybe we'll give it a maximum width, say, "Don't be any bigger than this" and just hope you have the maximum width of here. We'll say the maximum this image can be is something like... I don't know, maybe 400.

Is that going to look pretty good? We'll find out, we'll try it out. So there we go, it's little bit thinner. Maybe we'll change it to 300. Let's see how that looks. There we go, it's a little bit smaller. Now, the other thing you might notice is, these are slightly misaligned, and the reason for that, as you remember, we only added margin to the left. So if we scroll back up, we'll find where we said that.

We said, in our images, just add 32 to the left. So what we're going to is actually change this just for the header. Let's see how that looks. Again, just for the header. These links, these A-tags, are going to have margin. Zero on top; maybe we'll just do 16 and 16 both sides, on the right and left... and there we go.

Looks a little bit tidier. So as you can see, it's quite easy by adding these media queries in here. This is a kind of mobile version and- well, more like a tablet version of the website. Now, as we start to go down even further, you might notice that the layout kind of breaks even more. So something at, like, 600-ish, around about here, doesn't feel right. This is too thin, how do we fix this layout?