Production video - Tidying up the web page design

Hi, my name is Dan. This is going to be a production video where we go through and tidy up some of the things that I've been ignoring through the course. Just kind of tidying it up, and work through our Desktop and Mobile view.

Now what we're not doing in this class is we're not going through and styling for these other two Media Queries. There's nothing wrong, we definitely have to do that. But we're just kind of keeping the class short enough, and you can go through and do these guys in your own time. So we're looking at what looks like a Mobile down at this size, and what it looks like at Large devices, and making sure those are perfect. And then in your own time you can go through and do these other two Media Queries.

Couple of things I want to change is-- I want to go preview this in my browser. Now we got rid of some of the Padding at the top here where there were 70 pixels, that kind of pushed Hero Box down apart so that the navigation can sit on top. And what we did is removed it, so it slipped underneath. And I like that, because that means we can see things underneath it, which is great, but it's wrecked my Padding here. So I'm going to have to put in a little bit of extra Padding to make it seem like it's got a bit of a gap between the two.

At the moment, it's equal distance from the top and bottom. I'm going to have to make this a little lopsided for the Hero Box to make it look like it's centered. To do it, jump to Dreamweaver. Let's go to the top here, there's my Hero Band. I'm going to go to 'Global'. I'm not doing that specifically for different views at the moment. I want to do it Globally, and you can see, here's my band-hero. And I make sure it's set. And there's 100 pixels at the top, so what I might do is, I might drag out a little bit. It should go up another 70 but I don't want it to be that big. It's getting quite a big box now, so I'm just kind of winging in at the moment, making it look centered. I'm lowering the bottoms a bit. Let's do 'Save All', and jump out to Browser view.

That's looking more centered, maybe a little bit more on the top here. So what we're going to do now is, that same box, when I go down to Mobile view, is these gaps, just a bit big when it's on Mobile, it's taking up a lot of my screen. So, what I want to do is, I'm going to have a Media Query, so when it gets down to this Small view, this xs, let's go to decrease the Padding. So what I'm going to do is make sure I'm on 'max-width'. So 'main.css', 'max-width'. For my Small size, I'm going to add a 'Selector'. And I'm going to use the up arrow. That's as long as it goes. Now this one, I want to rename it. That will work, having this Compound Selector, but I don't need it. I just need band-hero. And what I want to do is, down here I want to override the Padding, and make it a lot smaller. So, let's try '20 pixels'. Too small, sliding underneath. Let's go to '50 pixels'. Actually I'm going to drag it. Click, hold, and drag to the right. I might not have done this earlier on, I've been typing it in. You can click, hold, and drag across any of these numbers and it just drags, and slides, and it's quite an easy visual way to see how things line up.

This one here, I'm moving it here. Something like that. Let's go to our Mobile view, sorry, the-- I'm shrinking it down. Now, during this class, to make it easier for me I've just been re-sizing my browser to make it look like a Mobile. You should have your phone connected, which I do, in front of me here. Using the Device preview. Which you can do down here, which we did in an earlier video. Remember, we did the selection of this, and it being done on to my phone, which is awesome. But, just for convenience, I'm checking it on the browser here. So big Padding, small Padding.

Do I need to worry about the edges here? No, I'm just fine. Next thing I need to do though is this Text. This Text, it's getting a bit big on Mobile. So, Text 1st Paragraph, it's got an unique Class applied to it. So when I change it, it's not going to mess around with anything else, hopefully. So, 'main.css', 'max-width'. Let's add one for 1st Para. I'm using the up arrow just to get it down to the basics. 'Font', 'Font Size'. We're going to do '16'. Maybe a little bit lower, '14'. 'Save All', check it in my browser.

This is where you actually need to be on your mobile phone because making it small here is fine, and then we were actually checking it on the phone, is it still legible? It was what you needed to do. And this H1, I might make it a little bit bigger instead of the size here. It's getting a little bit lost. I might make it a White change as well because it's that really thin color. I might jump back into here. That's my H1.

I'm going to do a couple of other things. I'm going to increase the Font Size just a bit. Something like '20'. '22', '21'. '21', and I'm going to play with the White, so I'm going to turn 'Show Set' off. Take care of all my options. I'm going to 'Type', to 'White'. And I'm going to save it to the heavier '500'. Just to make it behave here. This one here. Yes, nice.

Next thing we're going to do is go through and do the same Padding, and the same bit of Text for this one here. Exact same thing again. 'main.css', I'm going to click in here just to help me out. I'm going to do it for my small exercise. I'm going to make a new 'Selector'. And 'band-whoweare', they're still merged. And I'm going to play around with the Padding, so Padding down. I probably want it to be the same as the Top and the Bottom, I've had to guess a little bit because I remembered this thing sliding underneath there, but the Bottom should be fine, so I've got to find out what I did for this Container brand-hero. I did 8 pixels at the bottom. There's a bit of a gap from the text here, so maybe that's not going to work. Here we are.

You set in, come on, lie down. So I have to guess this a little bit. Let's do the Type for this one as well. This guy is using Text Option 1. So if I change the Font Size here, what is going to happen? That's right, because I've used Text Option 1 down here also, it's going to shrink this font down. So, the way to get around that is one of these two needs an unique Class. So I'm going to add one here. There's a bit of a hack. I should have been a bit more careful when I was designing the site, and not reused it knowing that there's going to be some fundamental differences between the use of this Font down here, and the Font up here. Now, if there's lots of Body Copy, of course, keep reusing it, but if there is like, this one here, I should have known better.

So I'm going to add a Class up here, and this one's just going to be like a little clean up Class where it gives me a little bit of more control when I'm dealing with Media Queries. This one's going to be 1 across, 1 smaller. Call it 'text-smaller'. I've already got a text-smaller. Actually I'm doing it the wrong way around, Mid Class first, over here. Let's make it in Global. No, let's make it in Mobile, as I'm only going to use it in Mobile. I'm going to call this one 'text-smaller'. We've already got a 'text-smaller'. Who is he? Let's find out who takes the 'smaller' of this. Where did it come from, is it from my css, from earlier on? 'text-smaller', or is that one from Bootstrap? Don't know. It's because I was messing around, and trying to add the Class over here, it's dumped it into my css. So, he didn't exist, it's just because I was using this method over here. I'll show you. I clicked on it, and I added it here. It added it to my css. It's a different way of doing it.

I'm using this method over here though to keep it consistent. So I'm going to call this one '.text-smaller'. And what I want to do is, I want to go down to Type. And I want the Font Size to be smaller. Let's get it down to '3 pixels', '2 pixels'. We're looking for it to adjust over here. Why isn't it adjusting? It's because I haven't applied it yet. So I need you, it's going to be called 'text-smaller'. Why do we call it text-smaller, and not whoweare text? I'm hoping that later on I can use this Class again somewhere, text-smaller. It's matched something else, I can reuse it. We're always thinking ahead to try and make sure you give things generic names. Try not to call it things like text-blue, and 20 pixels. Why? Because later on you might make it 16 pixels, and say, red color, and you're stuck with this Class, and you have to go through and change it all. So keeping generic names makes things a little easier.

The Font Size is a lot smaller, I might make it even a little bit smaller, '18'. Let's check that out in a browser. I might go and adjust the padding a little bit at the bottom here. Just to increase it up. Let's look at the next part. Same thing here, we're going to play around with the padding. We might play with the Font Size, but not as drastic as this one here. This next part down here, the purple part, I'm going to mess around with the Padding here. Let's go do that, so I want the Padding to be a little bit smaller. So again, make sure we're on 'css'. 'max-width', using '767'. I'm going to grab 'Selector'. The one I want is not here. I'm going to call this one 'band-services'. I want 'Show Set' off, and 'margins'. Let's make it something small. Let's go here again. A little bit hard, keeps jumping around. It's easier if you've got your mobile phone. I've got it in front of me, so I can see it, but I'm trying to use this screen so you can see what I'm doing. The same for this guy here, I select it here, and this one is going to be called '.band-portfolio', and turn 'Show Set' off. I'm going to save you, 'band-portfolio'. And you're at 'min-size', I'm going to play around with the 'Padding' here. Come down. A bit jumpy. Try '33' at the bottom as well. Great. Good, jumping around it. Nice. And definitely the Phone needs to get a whole lot smaller. Grab 'Selector' here. Got to remember what I called this one, this one here is band-footer. I keep clicking the wrong + button, 'band-footer'. I go up to 'Padding'. And I'll copy this same as the last one we did, '33', and '33'.

I was just thinking about this guy here. I want to make this one a little smaller, then add some Padding to it, but because it's using the same Class as over here I should totally go back and make it a separate Class. But we're going to show you how to use the Compound Selector. It's only going to work in this instance because there's not much going on in this Band here. So what we're going to do is, we're going to say 'New Selector'. This one's going to be 'Selector', I'm going to put in a full stop. Everything that is in the Band for Services, that also have a p-tag, which is what these guys are. I can click it, and he is wrapped up on a p-tag, there he is there. And I can say scroll down. Whenever there is a Band that is a p-tag, if you happen to meet this criteria, can you lower your Foot size down to 'pixels', '220'? Or maybe '30', no '24'. So it's just a bit small when it gets down to here.

One thing I'd also like you to do if you're on a p-tag, and you happen to be in band-services, and on Mobile, is I'd like you to go up to the top here. I would like you to play around with the Padding. Now, why don't I just center it vertically? It's a real big pain. Weirdly, you can do horizontal centering really easy. Especially the text, there's just an option here that says Center. You can deal with div-tags, you can do all sorts of things really easily horizontally. Vertically though, it's a huge big pain. Go off and Google it, check out 'css tricks', they've got a really explanation of it, and how to get around it. There's probably about 10 methods to do, and all the different times they can be used, and can't be used. I've just faked it with a bit of Padding. Is it pretty? It works. Is it a pure lovely code? No, it's not.

Let's have a look at the two different sizes. So I'm going to do a 'File', 'Save All'. Jump back here. So when I'm down at Mobile, it's left aligned, it's centered, and it's a small size. And when we're going up to Desktop, it's big. Probably add some Padding out here as well, so I can go through and do it for maybe my Giant view. I can make a specific Media Query just to push it down to the bottom here, or I might do some stuff in my Images.

All right, that's it, we're getting there, where it's looking a little cleaner now. Let's get on to the next video.