Adding our desktop layout

- [Rik] Currently my media query doesn't fix my problems. It, well, it just makes the background go red. So at the moment, it goes red, but how does it fix the layout? So what is actually causing the problem with the layout at the moment? So what we need to quickly look at is the rest of our code. If I scroll up the page you might notice right near the top we have our page as a fixed width. It's always going to be this 1,120 pixels wide, and that's because we said this is our grid system on desktop.

It's kind of what we did here. We picked out how wide this was and then we said, "This is the page size." What we wanna do instead is change this all the time. Now it's something that CSS is really good at, because it's built to be responsive. So what we're gonna do is actually overwrite this width. Now, where do we want to overwrite this width? So what we wanna say is, "Well, when we get here roughly, "when it starts to break, "then we want it to not have this scroll "going at the bottom of the page." So let's do that first.

So when this page breaks is 1,120, 'cause that's when the width starts to break. So what we're gonna do is instead of this being background color red and this is at 600, let's put in some proper numbers. So where does this break? So this break's not at 600, it actually breaks at 1,120 pixels. So we can just see if this breaks at the right place now. Put this background color red. So red is when it breaks.

This is when I want to start changing things. What do I want to change? Well, I don't want my width of the page to change. I kind of want it to flow with the rest of the page. So instead of background color red I'm gonna get rid of this for now, I'm gonna change the with of this page to be automatic. Let's just make it whatever it should be. Fill in the rest of the gap. So now what we should see, is if I go down to here, and I start making the page width smaller, notice how the grid further down on this page gets a bit more flexible.

Things are changed independent on the page now. There's still a lot of things breaking. We'll come and fix that a little bit later, but this is not having this page scroll any more. Now there's still other problems here, like we don't have any kind of gutters around the edges. How do we fix that? So how do I move this away from the edge of the page? What I'm gonna do here is add some margin. So underneath here I'm gonna say, "Well, how much do we want on the left and right?" Well, here, what I'm gonna say is margin.

I still wanna keep the things from above. So let's just check what they were. They were 80 auto 48 auto. So let's keep them in place, 80 auto, we're gonna change this in a sec, 48 auto. So this is overwriting, but overwriting with exactly the same thing. What I want to do here is the automatic margins that were moving things inside should now be a fixed distance. I always want this to now be a fixed distance from the edge.

So what is the fixed distance here? Well, let's make this something like, well, our grid, if we remember from before, let's turn it on, let's have a quick look, was 24. We upped it to 32. So maybe we do 32, or maybe double 32 here to make it even more space. So let's say this is 64 and 64, let's try this. So let's see, now we have this distance from the edge. This is always 64, but our grid in between flows. But you might notice one little thing, so when I make it go here, it snaps into position.

Now why does it snap into position? Well, it's because I hit exactly where the grid should go. Now as soon as I hit 1,120 this then pushes in. So we might wanna give it a bit more space to have this a bit more natural. How do I do that? Well, what I wanna do is move this point a little bit further up in my media query. So where, about there instead, I actually want to change things. So to do this, what do I need to account for? Well, what I wanna do is account for these extra 64 on each side.

So just doing a little bit of math in my calculator, I'm gonna add 64 to both sides. So what my media query should do is account for these two things, and this is the final number. So my media query is actually gonna be a little bit bigger than 1,120. It's going to be just what I calculated from before, 1,248. So this feels a lot more fluid now. So now if I scroll down this will fix into position at the right place.

But this feels a little bit more natural now. So we've got the start of media queries in here starting to kind of make our page look a little bit more natural. Still a lot of things to fix. No worries, we'll talk about that along the way. But we've fixed the main problem with our layout. This is now a responsive design.