Hi there, in this tutorial we're going to take our Desktop view which just has 3 columns, and when we get it down to 2 columns, when it gets down to Tablet, and then, when it gets down to Mobile, hey, just 1 column. Super easy to do, let's do it in this tutorial.

So currently we have one Class kind of telling it to be this third, 33%. So I'm going to click on it. This guy here, it's not the Image, it's the Div that's around the outside. Remember, Column just gets him to float left but this Column Large, or lg, is the one saying, be 33%. So we need two more applied to it, so let's make the first one.

So, 'CSS Designer, 'styles.css', I'm going to put this one in 'Tablet', and make a new Class called 'col'. We're going to do 'md', for median. And this one's going to have a width of percentage. And this percentage is going to be-- now it should be 50% to go equal, but I'm going to put Padding around it, so it will be 48% because I want the percentage margins on each side. I'm going to switch it to percentages '%'. And actually I might do this all the way around. So pick percentages with that little Locking Icon on. It means they go all the way around. So, all the way around. Nothing happens, because we're looking at a Desktop view, and we haven't applied a Class, so let's add it.

So I'm going to click on this. And add this one called 'col-md'. And if it still doesn't recognize it, like it hasn't been made, I'm going to click off. I'm going to do a 'Save All', then try and apply it, to you. Grab the external Class. Turn it off, turn it on and hopefully now, '.col-md', there it is there. I'm going to just save it all. So that's applied, so it's going to kind of work. So let's have a look in a browser. So instead of my Desktop size, we're going to get down to Tablet. You can see, he wants to occupy this. We need to do the Padding as well, so we might—

Well, we can play around with him in a little bit, let's just get the Images going. You can see, he is about half. So we need to do it for all of them. So, we could go through, select the outside Tag, add them all. I'm going to show you a little trick here. So, I want them-- can you see, how Classes are applied down here in Code view? So it goes-- Div has a 'class=', and inside these quote marks, all the Classes, 'col', 'col-lg', 'float-left', and 'col-md' get added. I'm going to show you a cool little trick, something specifically Dreamweaver.

If I click in here, and then hold down the 'Command' key and click in there as well, you can see, getting multiple cursors. This is really handy when you want to add a Class. 'col-md'. Don't add the period '.' at the beginning because we don't need it, because it says 'class' over here. Mix of all different Code view. And that's why we're adding them all at the same time. 'Save All', now check in the browser. Look at us, how good are we! So, Desktop view, and Mobile view.

I find these types of steps in the course quite satisfying. Probably, you'll do too. Let's go and do the Mobile version, and we'll do Padding in a little bit. So, we want to create a new Class. So 'Styles', we're going to stick it in Mobile. We're going to create a new Class in here called-- now, we should call it probably 'small', right? We're going to call it extra small. Why? Because I'm trying to get used to some of the styling language that goes on in big wide world of Web Design. And 'sn' is often used for Phablets, that kind of big phone size, like the iPhone Plus. We do have the plus sized phones. We could call it small, and that's fine, but normally people call it extra small for that kind of smaller mobiles that are about 300 pixels wide, like a standard phone.

And what we want to say is, we want you to be 100. So we're going to go not quite 100, we're going to add a bit of Padding around the outside. I'll do 98, make sure it's percentage. These guys, I'm going to lock it all the way around, and say "I'd like you all to be a percentage of 1.” Puts in a little. So now, 'Save All', test in the browser. Let's go down. Ready… that did not work. I did not apply it. So you've got to make sure—

You're probably looking at me, watching this video, going "That's not going to work, Dan." You need to do a bit more of your cursor tricks, we could add, remember, manually, but we're just going to be quick and go 'small'. It's not even small, it's extra small. 'Save All', check it in here, now we're working. Desktop. Tablet. Then down, Mobile. They're all stacked up, there's a bit of a gap around the outside. Looking pretty cool. There's a few little things to work on. But I think, a success. We've learnt how to do Responsive Columns in Dreamweaver. Let's go and tidy up a few things in the next video, but well done, everyone, we're getting close to having all the techniques we need to go and build, in your website. All right, on to the next video.