How to change the layout of a responsive website for mobile vs desktop

Hi there, in this video we are going to take our sweet new Media Query skills, along with some of our past Flexbox skills, to do this, go from Desktop view, where it's 3-across, you're ready for tablet, tablet, tablet to mobile1. Now this is proper responsiveness, where we start changing the structure of a site to make best use of the screen real estate available. Let's jump into VS code and work out how to do it. 

First up let's get rid of this stuff. Don't need the H1, don't need the styling, we'll leave our Media Queries. So when you are deleting the H1, adding Media Query, don't delete the second brackets, because it will half work, the browser's pretty clever, and says, "Well, I'm missing this, but I'll still work, kind of." So just make sure we don't delete that. 

We're going to add a container, remember, container is a weird one, where it feels like this should be, like a specifically named html5 tag, like Div and Header, is not, we have to call it a class called Container. So this is where everything's going to go, let's style this container. So we're going to do all of it in global. We're going to say, container, I would like you to be-- we'll put a background color in first, to make sure it's actually appearing; background color. I'm sick of these colors, I'm going to pick my own by clicking on it, and then dealing with the Color Picker. Background color, let's preview, make sure it's working. 

Nothing is working. Why not? Because it doesn't have a height, I knew that. So we need a height, and we're not going to use just regular height, remember, we're going to use min height. Min height, even. I'm going to throw in 500 pixels, just so that there's some kind of guts to it, there it is there. That is not a-- it can be any size. Actually I probably leave it off and just start building, knowing that it will appear at some stage, but it's a bit weird for Classes. 

We're going to add a width like we did before, we're going to say, a width of 1024 pixels wide. Now the problem with doing that, a width by itself like that is an absolute size. So it's going to always be 124. I don't care if you're a mobile tablet, so what we're going to do, is we're going to say, you can be a maximum of up to that, because that's what I've decided my like-- oh, a bit weird, there you go, delete him. Having computer issues. So a max width is just going to say, you go up to there, but no further, but you can go smaller, because it's just the maximum width. 

Last thing we'll do is we'll get it to centered. Do you remember what this was? Remember, it was margin left and right. Set to Auto, we're going to use our shortcut. So we're going to do margin, so the top and the bottom are going to be 0, but the left and the right are going to be Auto. So just the space between them, that should work, nice. So that's my container. Now inside of this container, I'm going to add a bunch of those kind of blocks you saw in there. So up until now we've been calling them cards, in some instances, boxes. In this case we're going to start calling them Cols, short for column. For no good reason, it's not like a predefined tag in here. It's just very common to use it, and when we start looking at things later on, something called Bootstrap, they use the word Col as a box instead of box, or card, tile. So we might as well just get in a habit of doing that. 

So I want 10 of them, and I want, inside of those boxes I want H1. I'm going to try and impress you with some Emmet. So what do we want? We want a Col, and inside of that Col, so the greater than bracket, so inside of it, it's going to have an H1, and I'll show you another fancy thing. If you put in curly braces here, and say-- say I want a box in there. The curly braces is going to put, inside of that H1 it's going to put some text, just plain old text called Box. So that's kind of half of what I want, right? The curly braces, return. So that's kind of what I want, but if I do times 10, 'x10', it's not going to quite work because it's going to give me a Col, one Col, and then 10 H1s. 

So remember, we kind of did this before, you put it in brackets. Coding helps, tries to put two in them, so I want all of this to be working, and you're like, "That wasn't worth it," and it totally wasn't. I guess I'm getting you used to the syntax, showing you cool helpful things, like putting in curly braces. Now the other weird thing about it is that, well not weird, it's giving me kind of some nice structure, but it actually looks a little bit nicer, if I just do it the long way, so I'm going to do Col, I'm going to use the right case. I'll just duplicate it, it's heaps easier, in this case. So Col inside of here is an H1, inside of this is going to be Box. That's what I wanted, right? Cool. 

To duplicate it you hold down the 'Option' key on a Mac, and the 'Shift' key, and hit down arrow, so that's 'Option-Shift-down arrow'. If you're on a Mac, sorry, that was for a Mac. If you're on a PC it's 'Alt-Shift-down arrow'. And you should count, I didn't count, we need 10 of them. I'm going to add numbering to them, that will help me. No fancy way that I know of for doing this, except for, ah, look at that, that went well. Guessed the right number as well, that was just down arrow, and start typing. Let's have a little look at what we got, bunch of boxes. 

Now let's style those boxes. So they're called Col, over here, my global, I'm going to say, '.col', you're going to be a color, no, you need to be a background color. Background color. I'm going to pick any old color. So I can click in it and pick a color that I like. Makes no real purpose. Here we go. Pick some nice colors, Dan. So we'll start with the Col, let's have a little look. Let's give it a width and a height, sorry, going a bit fast. So yeah, it's just doing that because I've not given it any dimensions. So let's give it minimum height of, I don't know, 200 pixels. Nice, let's give it a width because they're taking up the whole thing. Let's see if the width will fix it. 

So instead of doing a max width or a min width, we could do absolute sizes and start playing with max width, but we're going to use percentages which is basically the same thing, because it's not a fixed size, and what I want in this case is, let's look at our mock-up. So this is the Desktop view, so I want it to be about that. So 3-across, then 2-across, and 1-across, so get 100% width. This one's going to be 50% width, this one's going to be 33.3 

I'll leave a little bit of space in between them, so it might just make this 30% across. Let's have a look, it's not going to work. The reason it's not going to work is, why are they stacking on top of each other, and not beside themselves, or in line? You got it. So it is-- we could say columns are, Display-inline. And you'd be totally right, Inline block, and that would work, but what we're going to use is, go back to our Flexbox, remember what we could do with Flexbox? Remember, Display, and we're going to use Flex. It's going to do part of the thing for us. No, it's not, Display-flex 30%, yes, why are you displaying flex? Oh, I've done to the wrong one. It has to be the parent, you remember that, Dan. A good test for you, pretend it was a test. 

So the container, you apply it to the container, so it applies to all the children, which are these Cols. Let's have a look now. That kind of works. It squeezed them all in, by default it squeezed all 10 of them into the same row. It made it 100% of that parent. What I'd like to do is, actually do here, do Flex, Flex Wrap. What kind of wrap? Just the regular old wrap. Save it, awesome. So 30%, they're wrapping. 30-30-30, we get to 90, leaving our gap. 

So a couple of things, actually before we go, wrap, you can, you saw it there. I can't remember if I rep-reverse, so Box10 is at the top. Never used that but it seemed, I felt like I wanted to share that there. Now what I want to do is put the spacing in. We could play with margins, but remember that fancy thing we learned earlier on. We can justify the content, and we're going to use, which one? Space around, Space between, there you go. Save it, there you go, Space around might be a good, you'll see it here, I had to kind of like point it to you before, but we had a white background. 

So the Space around is evenly either side. And I never want that, I always want Space between. Let's go add a bit of Padding to the bottom of them. So the Cols, let's have a little bit of Padding. Margin bottom. 40 pixels. All right, it's looking good. The cool thing about them, because they're 30%, they're responsive by themselves, they get to a max width, but they're allowed to go smaller, the container can get smaller, but they can't go past that, and that's going to work for us at the moment. You could design for a heaps larger size, and it depends on your audience, but they might not have, you might be designing a whole big website for all, for people that are just never going to see it. It might not be that many people who have this ginormous desktop view. That is it for that. 

Now I'm ready to adjust them for the different Media Queries. So down here I'm going to use the same thing, so Col, add our curly braces, I'm going to say, 'Col', we're only going to do the width. So the width down here is going to be a different percentage. So remember, 50, it's kind of 50% for our tablet view, but a little bit less for this, so maybe 45%. I don't have to reiterate things like Justify or Flexwrap, because it's already globally applied to everything. Let's have a little look. 

So Desktop view, let's use our proper fancy one, right click. 'Inspect'. Let's go to 'Show Media Queries', they're not on by default. Show, show, show. Oh yeah, right there in blue. Let's go to this bigger size, it's not adjusting. It's because of this, I left it set to iPhone4, and it will not change. Click it to 'Responsive', and it will change. So let's go. Big version, three boxes, go to the smaller one. Hey, it's only 45, there's a gap in this, a bit big in the middle there. So maybe 47 might be a better percentage, but you get the idea, right? 

We did it with plain old H1s before. Now we're doing with actually the structure of the site, which is, kind of tends to be more of what you're doing. We've done it for tablet, tablet, desktop. Tablet, mobile, let's do that next. So let's look at our Media Query here. Steal you, going to put in 100%, so don't have any of the gaps. It's going to kind of fill it up probably. There you go. Let's get it a little bit smaller, bigger, three, two, one, how cool are we! That is the kind of really big takeaway for this video, is we're using the exact same thing. We had to do some styling to make it kind of look like a website. We've made some boxes but to do it with structure all we really need to do is, we need to add these two bits. Really, we just need these two, to get them in line, and then to wrap on to the next line, then we decide at this different size, I want to change that, I don't want to be width anymore of 30%, it's going to be 45. 

So we don't really say two rows or two on a row, we just kind of make it, so that that happens by giving it a size, that only allows for two to fit. A couple of little things, one that I ignored is down here at mobile. You'll notice it is still a white line around the outside. That's one of the first things I do, I'm like, "Man, that's annoying." So by default, you know how, like the default, the H1 is black, and it's Times New Roman, and it's nice and big and bold. Same with the body, the body has a global, of margin, I don't even know what it is, but I always go through and set margin to 0. So that there's none around the outside at any view. I didn't want it for any of them, Making sure, from the top, from the sides, and for the mobile, gets it right around the outside, it's nice and kind of joined up, because on mobile you want every pixel counts, to get as much detail as you can into that width. 

Now we did it here, and we're fighting with the defaults. So that is a really good opportunity to say, "Actually I'm doing this, I'm about to build out some CSS resets myself, how about I just use that CSS reset we already have?" We've already got one, remember, we've got one, so I'm going to delete that, so it will come back. I've got one, remember the Rhys Meyers one? So I'm just going to copy and paste that and use that. So I'll show you what I do now, is I dig around in my files for an old folder. I'd go into here and say, remember Project 2 on my desktop? There was that CSS reset, I'm just going to copy it, find my Project3, mine's on my desktop. 

I add some shortcuts to speed things up, I'm just going to paste it in here. I'm going to add it to my CSS, so link, and the CSS one, and it's not called Style, so it's called CSS. If you delete the text in here it should hopefully suggest it, CSS reset, and I've totally done it wrong, and you're like, "He's done it wrong." If you haven't, we'll discuss what I've done, because it's actually done what we wanted. Got rid of the margin around the outside for all the views. It also got rid of the giant text, it's now just a regular old size. 

Now what it didn't do or what's going to run into problems later on, is, let's say that I want to style the H1, so I go, all right, H1 now, you are going to be a font size of, let's say something big, 100 pixels. Good, awesome, Check it, hmmm. Check it, check it, not working. Why is it not working? Pause it, have a think about it, unpause it, you're on pause now. You didn't pause it, I know you didn't. It's this thing, they're in the wrong order. So my style is being applied, remember the flow kind of goes on, and it says, be an H1 of font size 100, then this one loads, and if we have a look at that, take it over here, it says, H1 is a font size of 100%. 

Any other things that are telling it what to do? No, that thing is making us just go to 100% of the one em. We're just going to make sure the order is the right way around, so you, is there, now that shortcut, you can just cut it, and paste it above it, but if you click in it anywhere, and hold down the 'Option' key on a Mac, 'Alt' key on a PC, no, highlight the whole line, and hold down the 'Option' key on a Mac, 'Alt' key on a PC, can you see I can kind of just tap my arrow key, as long as I hold down my 'Option', or 'Alt' on a PC, I can just kind of move this thing along. 

So make sure the CSS is reset first, then do that. Now my font size, nice and big. I don't want that. You get the idea; save it. So that's the kind of real foundation for our responsive website. There's lot more to do but that's the core of it. We're using Flexbox which we kind of know a little bit about already, and we're using Media Queries to kind of turn bits of CSS on and off. I hope you're feeling good about Responsive Web Design. I'll see you in the next video.