Hey, my name is Dan. In this video we're going to look at how to adjust the column widths depending on your screen size. So, looking at Media Queries, and how we can adjust the different column widths, depending on what view you're looking at it. Either mobile, tablet, or desktop.

To do this, I'm going to create a completely new file here. You can follow along, you don't have to. And what I want do is create a separate size so we're not messing around with our original, just so that we understand the principle before we move on. Now to do this properly I need to make a brand new site because I don't want to mess around, and start adjusting the site I'm working on. I'm going to go to 'New Site'. I'm going to call this one 'Mobile - Column demo'. Where am I going to put it? I'll stick it in my Desktop. I’m going to make a new folder called 'Mobile demo'. And I can bin this later on.

So I'm going to click 'Save'. I've got my site, defined, and I'm now going to go to 'New'. I'm going to close this down. I'm going to go 'New'. And I'm going to go to 'New Document', I'm going to start with 'Bootstrap'. I'm going to create a new Bootstrap file. I'm not going to include the 'pre-built layout'. I'm going to hit 'Create'. I'm going to save it. I'm going to call it 'Index'. Hit 'Save'. Now let's go put in some boxes. We're going to put in some boxes, we're going to put 6 of them in here. And then we're going to adjust them depending on what size the screen is.

So we can show you how those structures are applied. So let's go to 'Insert' panel. Make sure you click on your Body, click on 'Grid Row', and 'Nested'. I'm going to make him 6. And if I click inside one of them, you can see, it's set to this 'md'. If I zoom out a little bit, actually in Dreamweaver, there are 4 view ports. There is this Media Query for-- this one here is considered 'xs' or small. That's everything that is lower than 767 pixels, what we consider as xs. There's this gap between these two here of 768. It goes up to 991. That is considered a view port of sm. This one here is md, and this one here is lg. So large, medium, small, and extra small.

Because I was zoomed in, in Dreamweaver, when I made my column, it's added this one called md. Can you see, that's where the edge of my document is here. If you're using a larger screen than me yours might be set to lg. I'm going to manually make mine 'lg' for the moment because I want to do large first. And I want them to be large all the way across. I'm just going to adjust them here, or if you're doing in Code view, Code view actually would be easier. I want all of this to be lg. I'm just going to replace them. This is the first, I want to start with large, which is my desktop view. On my large desktop they're all going to be there. If I zoom out now, when I'm at large, you can see it is 1, 2, 3, 4, 5, 6. And they all span 2 columns, making up my 12.

So let's put some content in to make it a little easier. I'm going to put some text in here, under Code view and I'm going to call this one 'box1'. And this one here is going to be 'box2', box 3, box 4, box 5, and box 6. I want to style it a little bit as well. So I'm going to create a 'css class'. Over here, I'm going to-- I don't have a separate one, I don't want to adjust the bootstrap one. So I'm going to make my own 'css sheet'. I'll call this one 'main', lower case is better. I'm going to save it. Then I'm going to create a 'Selector'. I'm going to call this one 'box-style'.

What I want to do now is, I'm going to put it-- I'm going to do a couple of things just to make it easier to see these boxes. And it's going to be a little bit of height. So I'm going to put in height, maybe pixels wise. I'm going to put '100 pixels'. And I'm going to add a background color of a greeny bluey color. And the shade, a darker color. And I'm going to put a text color so everything inside these are going to be a text color of white. And I'm going to make them centered. And I'm going to make the size of it a little big, so we can see it. I'm going to go to 'pixel's. I'm going to make it up to maybe '25 pixels'. Nothing else applied yet, so I'm going to click in here. I'm going to zoom in so you can see it. Click inside this one. I'm going to add the Class called 'box-style'.

I can go through and add them all, but you can see, in Code view is going to be a little bit easier. There it is there, box-style. All I need to do is make sure it's inside the quote marks. And I'm going to match them all up. See them all come for a ride. So all of them were applied and they're doing some weird stuff at the moment. If I zoom out, and make sure I'm at large view, perfect, because that's what we taught him, at large, be spanning 2. What happens is, when it gets down to the smaller one it does not know what to do,  and makes it span all the way up to 12. So I'm going to be zoomed out to make it a little easier for you to see what we're doing.

So that's my 6 boxes. Now what I want to do is, when it gets down to this size, which in this case is md, I want it to span maybe 4 across the top, and 2 down the bottom. I can do it using my little dragging sliders here but Dreamweaver-- can you see, I can't see the edge of this now. There was a little bit where I could drag it and slide it along. Dreamweaver has a few little bugs that way where I can't see the edge any more. So I can't manually drag it in, so we're going to do it in Code view. So I'm going to say, in here I'm going to say, when the column is medium I want this first box to span 3. You can see, he spans that one, so I'm going to copy and paste this for all, actually I might grab this one here. Leave it in there. Copy you.

We're on the medium, the 3 wide. So it means that, at the view port, if I zoom out, so at view port, large is this size, 6 across, but when it gets down to medium, it' going to change. It's going to be 4 across the top and 2 down the bottom, and that's how I go and change, based on the Media Queries, the structure of my side. Let's have a quick little look at this template here. At this, they're set to large. These are spanned 3 each. And when it gets down to tablet view it's actually spanning 6. 6 and 6 equals 12, and that's my full width.

So let's do the same thing here, let's get it down to this view here. And this one's going to be small. So when it gets down to column width of small, I'm going to make them so that they're 6. I'm going to copy and paste that across them all. Lovely. So, Desktop, 6 across the top, 4 and 2, and then, this one should be 2, another 3 rows. Let's get down to mobile, and it defaults at mobile to a full width, which is 12. I could write in here, 'col=xs', and do 12, but I don't need to. Why? Because it's the default anyway. So you could do it if you want it to be pedantic all the different things listed, but we don't need to. Let's go preview this in a browser. So I'm going to switch out. Turn to this guy, and Preview. Medium view, small view, extra small.

And that's how you use Media Queries and Bootstrap to play around with the structure. The next video we're going to look at the exact same thing with Media Queries, but instead of playing around with the structure we're going to play around with changing the colors of things.