Change fonts & spacing of a website for Tablet & Mobile sizes using Dreamweaver.

In this video, we want to take our Desktop view, which we've got here, but when it gets down to Tablet we're going to adjust this Hero Content here. So we're going to play with the Padding, change the Font size down on Mobile, even more. We'll change the Font size even smaller, adjust the Line Height, and we'll make everything centered. So centered, not centered. Big text. So now we want to go and do some updates to our Responsive Design.

We've designed this Hero Box for Desktop, but when it gets down to Tablet, there's a couple of changes. One of them is Padding from the side here, changes, it becomes kind of flat. And the Font size gets smaller. Font size gets even smaller than a Mobile, and becomes centered. And I've disabled this line here, on Mobile. Just I didn't like the look of it when it got down to Mobile because all of this was centered. So, let's go and do that now in Dreamweaver.

First up, we'll tackle the Padding. So, we've got this thing called Hero Content, that wraps up all my Hero Content. So we're going to add the Padding to this. So, Desktop, it's fine. Now we're going to go down to Tablet. We're going to click on that little Code Line there to jump where you can just drag this, remember. So, we're in Tablet, I want to get this to the edge now. In my design, in Illustrator, had a kind of flash against this Black Box but when I'm here in Dreamweaver, and I was practicing this for you guys, it's kind of, "I want to kind of have it roughly about 25 pixels." Or kind of aligns up with this Logo more. That is one of the creative freedom of being the Designer and the Developer. If I was following—

If I was designing this for somebody else and they gave me a Photoshop or Illustrator mock up, I'd do it exactly how they'd liked it. So, what we'll do is, 'styles.css', we'll do it for Tablet and we'll create-- there's no Selector at the moment for Hero Content, so we'll say, '.hero-content'. I would like you to have a margin of '25 pixels'. So better get that side, and I want it again on the other side, '25 pixels'. Nice! Let's do the spacing for the Mobile as well. So down here, it's back to 100 pixels, which was my Desktop. So I'm going to say 'Styles' 'Mobile' 'Selector' 'hero-content'. And I'm going to say, you my friend

You can always say 0 here, remember, we've got to kind of type it in again because 0 just means, actually we've left it at the default. And the default is under pixels, because the-- it's for the Desktop set. So 0 that side, 0 that side. Nice! Awesome! So the Font obviously is the big problem next, especially the Desktop, so we'll do with Tablet first. And what we'll do is, under Tablet view we're going to Style the H1. So the H1, when it's in Tablet view, I would like you to be a Font size-- so 'Fonts', 'Size'. Now I should go and check in Illustrator. Minimum, I guess. That seems okay, maybe a little small. So the other thing I need to do is play with my Line Spacing, or my Line Height. 'pixels', '0', and I'm going to get this to be something. All right, let's do it for Mobile.

There's a couple of things we need to do. One is, make it a lot smaller. So, 'Styles', 'Mobile'. 'Selector', 'h1'. And we will do a couple of things. We will do, first of all, 'font-size'. Actually I'll check what I've got in here, I should check this. So you at '46'. So 'font-size', 'pixels'. '46'. '406'. '446'? Remember, that's my keyboard, for some reason types in two digits there. All right, so that's the size. And I'm going to overwrite it as soon as I do it. Yes, well I do. And we're going to do, setting the center. Now it's aligning all the text to center, you can see in here, but you can see down here, it's not done these other attributes. So what we're going to do is, instead of styling the H1 for centered-- I will go and bin that. Because I did do the Text, everything that was text in there was centered, but I actually want other parts in there to be selected as well because that was just the H1.

So, what we're going to say is-- back to this 'hero-content' and say I want everything inside you to be centered. Now, the Line, this Image here-- this guy here is not, and you're like, "Hey, you just said so." It's because this one is Floated. So what we'll do in this case is we'll create a special Class just to push him over a little bit. We'll do how much do we hate him, stuck to there. I kind of hate him, so we'll do that next, just go and Style him out. But before we do that, let's 'Save All', and preview in the browser.

So Desktop, Tablet's smaller, and the Padding is different, which is awesome. And then down to Mobile, "Hmm." Gets smaller, and we're going to have to do the Line Spacing, which we didn't do. So it was the H1. So, 'Mobile', 'H1', 'Line Spacing', 'Text'. 'Line Height', 'pixels', bigger. That's about nice. 'Save All', test in browser. Better. Maybe it need to be a little bit high. So, if you don't have any Floated things, like we did here, that's going to be all you need to do.

So next part-- we'll save it for the next video. We'll disable this Line here and we'll get some special Classes to push him out. And it's nothing fancy, we're just going to apply Class to it and say, have Padding on Mobile, that kind of gets it centered. It can be really hard to actually properly center stuff when it's Floated, so we're going to cheat. All right, on to the next video.