Next thing we need to do is, if you look at our mock-up, you can see, they're actually, you can see, this image is only this big, but in our current mock-up it's stretching through the whole size. So what we need to do is, the Container that it's in, remember we called it a 'Class of Col', we need to say, "Hey Col, you need to be 33%, not 100%, like you are at the moment." So, 33% makes up our block, 33.3. So let's go and look at how to do that now.

Jump back into Dreamweaver. So Dreamweaver, let's go into Styles. And what I want to do, in my Desktop view, so, not Tablet, so find Tablet, just in front of him. I'm going to put a few 'returns' in, I'm going to put in '.col'. So I'd like 'col' there. Curly braces, I'd like you to be a Width of-- and I'm going to use a percentage of 33.3%. And then, the semi colon ' ; ' at the end. Make sure you've got the syntax right, often when I'm teaching people they do weird stuff with 33.3%, so just make sure it looks like mine. Hit 'Save', it's going to kind of work, let's check in the browser.

It's working, they're all 33.3%, thank you very much, but by default they stack on top of each other, they block on top. So we can override that by, underneath 'col' here, put a 'return'. Just underneath 'width', and say, "Float, my friend, float to the left, semi colon 'left;'. 'Save', preview it. And now they're all stacking next to each other. Oh my goodness, you are awesome! They're all 33.3% no matter what view I'm in. So that is it for Desktop view, we'll add some Padding later on, but that is how to re-size our Div for our Desktop view. Well done.

Next thing we need to do is, you can see, in my mock-up here it's actually 33.3% on Desktop, but at Tablet it's actually only 50%, and when it's at Mobile, it's 100% across. So that's what we're going to do now. So in Dreamweaver, what we're going to do in Tablet here, underneath our H1, before the closing one, because, you can see, Dreamweaver helpfully highlights it. You can see, if I click on any of these, beginning or end, you can see, that's the wrapper. So we want to make sure everything stays within these two curly braces. So underneath H1, but before this closing one, we're going to say, I'd like '.col', curly braces, return, I'd like it to be a width-- just like we did above there. I'm going to say, width of, in our case, it's 50% for Tablet, semi colon ' ; ' at the end. I don't need to say Float Left or Ready because this one at the top already says it. We only have to say it once, but when it comes to Width, we want to say, actually, Tablet, override the 33.3 and become 50%. Let's have a little look. 33.3%, man I'm finding that hard to say. Down to Tablet. Ready? Hey, now it's stacking how we wanted in Photoshop, and it's 50% across.

Now, I want you to pause this now, and see if you can do it for Mobile. All by yourself, pause it, go, do it, I'll be here. If you're not up for it yet, let's go and do it together, or if yours is going horribly wrong, we're trying. If yours didn't, and you did it, and you paused it, and it's working, be very proud of yourself. You have learned lots of Responsive Web Design in a very short amount of time. You were awesome.

So what I'm going to do, in Mobile I want to use the same one, 'col'. Curly braces. Now I'm going to say, Width, my friend, of 100%. Remember, don't forget the semi colon ' ; ', 'Save' it. And preview in the browser. Tablet is 50. Aah, Mobile is 100%. We are Responsive Web Designers of the new century. Okay, I get a little excited but hopefully you're a little bit pumped as well because we really learned the fundamentals of Responsive Web Designing. Everything else, we're going to tickle, and make work, but we've got the real foundations done already. And those foundations are Media Queries, then we looked at Responsive Backgrounds. We did it for Hero Background. Remember, we did a Background Image and we used this new CSS3 option, called Cover. That was awesome, but then we wanted to use it slightly different, not as a background, but just as a regular old image, and what we had to do is learn a Compound Selector, but really, the main part was this, where we said, Width '100%', and the height of 'Auto', and the display of 'Block'. That is Responsive Images.

And the last thing, which we just learned, was, we said "Hey Column, in Desktop, I want you to be this width, but when I use my fancy Media Query, I want you to be at 50%." Basically all other responsive changes we're going to do are going to be just iterations on doing this. Picking a Media Query, picking what controls the thing we want to change, and then just doing some changes depending if we're in Tablet or Mobile. If yours still totally didn't work and it's not working, let's do a 'reset', and move on. So let's close down 'index5', and open up 'index6'. Getting close to the end. Hopefully, if I preview in a browser now so it's all working, 100%. Tablet, 50%. 33.3% for Desktop.