Hi, my name is Dan. This is gonna be a production video where we go through  and tidy up some of the things that I've been ignoring  through the course and just kind of tidy it up  and work through our desktop and mobile view. Now what we're not doing in this class is we are not going  through and styling for these other two media queries. Um, there's nothing wrong. We definitely have to do that,  but we're just kind of keeping the class, uh, short enough. Um, and you can go through  and do these guys in your own time.

So we are looking at what it looks like on mobile down at  this size and what it looks like out at large at devices,  okay, large devices, um, and making sure those are perfect. And in your own time you can go through  and do these other two media queries. So, uh, a couple things I wanna change is, uh,  I'm gonna go preview this in my browser. Now. We got rid of some of the padding at the top here where  um, there was 70 pixels that kind of pushed  hero box down apart so that um,  the navigation can sit on top. And what we did is removed it so it slipped underneath.

And I like that because it means that we can kind  of see things underneath it, which is great,  but it's wrecked my padding here. So I'm gonna have to put in a little bit of extra padding  to make it seem, uh, like it's uh, got a bit of a,  um, gap between the two. So at the moment it's equal distance  from the top at the bottom. I'm gonna have to make this a little lopsided  for the hero box to make it look like it's centered. To do that, jump into Dreamweaver. Uh, let's go to the top here.

There's my hero band. I'm gonna go to global, okay? I'm not dealing with it specifically  for different views at the moment. I wanna do it globally and you can see here's my band hero  and I'm gonna show set  and there's a hundred pixels at the top. So what I might do is I might drag that up a little bit. Now 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 it at the moment and making it look centered. So I'm lowering the bottom just a bit. Okay? Uh, so that, uh, let's do save all  and jump out to my browser view  that's looking more centered. Maybe a little bit more at the top  here, just a little bit more. Great.

So what I'm gonna do now is  that same box though when I get down to mobile view, okay,  is these gaps are just a bit big when it's on mobile,  it's kind of taking up a lot of my screen. So what I wanna do is when it, I'm gonna have a media query. So when I get down to this small view, okay, this xs,  it's going to um, decrease the padding. So what I'm gonna do is make sure I'm on mixed width. So main CSS mixed width. Um, for my small uh, size, I'm gonna add a selector  and I'm gonna use the up arrow and it's as low as it goes.

And I want this one. I wanna rename it. That would work okay,  having this compound selected, but I don't need it. I just need brand 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, Uh,  too small sliding underneath.

Uh, let's go to 50 pixels. Actually I'm gonna 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 easy visual way to see  how things line up. Um,  This one here, I'm moving it. Yeah, something like  That.

Let's  go to my mobile view. Uh, sorry, the hang, I'm shrinking it down. Now during this class to make it easier for me,  I've just been resizing my browser  to make it look like a mobile, you should have your, um,  phone connected, which I do in front of me here. Um, using the device preview,  which you can do down here, which we did an earlier video. Remember we did the uh, um, selection of this  and it be it onto my phone, which is awesome. Um, but it's just a convenience.

I'm just checking it on the browser here. It's a big padding, small padding. Um, do I need to worry about the edges here? No, I think it's fine. The next thing I need  to do though is this text. So let's look at this text.

It's getting a bit big on mobile. So text first paragraph. Great. It's got a unique, um, class applied to it  so when I change it, it's not gonna mess around  with anything else hopefully. Uh, so let's main CSS max width. Um, let's add one for first power.

So I'm using the up arrow just to get it down to the basics. Font, font size, what we're gonna do. 16. 16, maybe a little bit lower. 14. Okay, Save all.

Check it in my browser or my mobile phone. This is where you actually need to be on your mobile phone  'cause making it small here is fine and dandy,  but actually checking it on your phone  and is it still legible? Um, was what you need to do. And this H one I might make it a little bit bigger when it's  down at this size here it's getting a little bit lost  and I might make it a weight change as well  'cause it's that really thin color. So, um, I might jump back into here and with my H one  and I'm gonna do a couple other things. I'm gonna increase the font size just a bit.

Something like, uh,  20, 22, 21. Okay, about 21. And I'm gonna play with a weight. So I'm gonna turn show set off. That gives me all my options. I'm gonna type, I'm gonna go to weight  and I'm gonna set it to the heavier 500.

Okay? Just to make it a bit heavier. Check this in here. Yeah. Nice. Okay, so, uh, it's uh,  next thing we're gonna go do is go through  and do the same padding  and the same bit of text for this one here.

So exact same thing again. Main, see it says I'm gonna click in  here just to help me out. Okay? And um, I'm gonna do it for my small exercise. I'm gonna make a new selector and band who we are. These  Two emerged for him.

And  I'm gonna play around with the padding. So padding  Down. Yep. Um, probably want it to be the  same as the top and the bottom. I've had to guess a little bit 'cause we are remember this  thing sliding up underneath there,  but the bottom should be fine. So I'm gonna figure out what I did for um,  this container.

Brand hero. Where is the Brand hero? I did eight pixels at the bottom. Uh, but there's a bit of a gap from the text  here, so maybe that's  Not gonna work. Actually here we are. See it, Dan, come on.

Slide down. Okay, so I'm gonna have to guess this a little bit. All right. Um, let's do the type for this one as well. So this guy is using text R option one. So if I change the font size here, what is going to happen?

That's right. 'cause I've used text option one down here. Also, it's gonna shrink this font down. So the way to get round that is, um, one  of these two needs a unique class. Okay? So I'm gonna add one here.

And this is a bit of a hack. Uh, I should have been a bit more careful when I was  designing the site and not reused it. Knowing that there were gonna be some fundamental  differences between the use of this um, font down here  and the font up here. Now, um, 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 gonna add a class up here.

And this one's just gonna be like a little cleanup class  where um,  it gives me a little bit more control when I'm through my media queries. And this one's gonna be, I'm gonna call this one smaller. Uh, I'm gonna call it text smaller. Okay, Actually doing it the wrong way around. Make your class first over here. So I'm gonna make it in actually  yeah, let's make it in global.

Nope, Let's make it in  mobile 'cause I'm only gonna use it in mobile. I'm gonna call this one. Uh, tech smaller. Oh, I've already got a tech smaller. Hmm, who is he? Okay, Let's find out who tech smaller is.

Where did he come from? Is it from my CSS Familiar on uh,  text Smaller or is that one from Bootstrap? I don't know. It's because I was missing around  and trying to add the class over here. It's dumped it into my CSS so he didn't exist. It was just 'cause I was uh, using this method over here.

I'll show you. Um, I kicked on and I added it here. It added it to my CSS I'm kind of using. That's definitely a way of doing it. I'm using this method over here  though to keep it consistent. So I'm gonna call this one at dot text  Smaller.

Great. And what I want it to do is I want it to go down  to type and I want the font size to be smaller  and let's get it down to  30 pixels, 20 pixels. Ah, I'm waiting for it to adjust over here. Here. Why isn't it adjusting? 'cause I haven't applied it yet.

So we're gonna, you my friend,  it's gonna be something called text smaller. Why we call it text Smaller and not who we are. Text. I'm hoping that later on, uh,  I can use this class again somewhere text smaller. Okay. And to match something else I can reuse it.

Um, so yeah, you're always thinking ahead to try  and make sure you give things generic names. Try not to call it things like text blue, uh, and 20 pixels. Why? Because later on you might make it 16 pixels  and say, uh, red color  and you're stuck with this class call. You have to go through and change it. Also keeping generic names, um,  mix the things a little easier.

So the font size is a lot smaller. I might make it even a little bit smaller. 18. Nice. Let's go test that out on my browser. Okay, I might go  and adjust the padding a little bit at the bottom  here just to increase it up.

Here we are Just it,  increase it just a tiny bit. There we go. Lovely. And let's look at the next part. Um, same thing here. We're gonna play around with the padding  and we might play with the font size.

Okay, but not as drastic as this one here. Alright, for this next part down here,  the purple part there is, I'm gonna mess around  with this padding here. Let's, let's go do that. So I want the padding  to be a little smaller, so again, make sure CSS mixed with  the 7, 6, 7. I'm gonna add a selector and the one I want is not here. So I'm gonna call this one band  and this one was called services I Great.

And I want to turn show set off and margins. Let's make it  something smaller. Something Smaller. Again,  a little bit hard, it 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 kind of use the screen  so you can see what I'm doing. Great. Do the same for this guy here. So, oops, here's the one look to here. And this one is going to be.band. And this one here is portfolio.

Great and turn show set off. And I'm gonna say you band portfolio, when you're at  minimum size, I'm gonna play around with the padding here. Come down  bit jumpy, try 33 at the bottom as well. Great, good jumping around. Nice and definitely the footing needs  to get a whole lot smaller, so stick  to here dot. And do we have a, gotta remember what we've called this one.

Uh, this one here is band footer. Keep clicking the Wrong plus button band  Footer. Great. Go up to padding  And I'll copy the same as that last one. We'll do 33  And three. Three.

All right. Um, I was just thinking about this guy up here. Um, I wanna make this font a little smaller  and add some padding to it, but  because it's using the same classes over here,  I should totally go back and just make it a separate class. But we're gonna show you how to use a compound selector. And it's only gonna work in this instance  because, um, there's not much going on in this band here. So what we're gonna do is we're gonna say a new selector.

And this one's gonna be say, oh, so a selector,  we're gonna put in a full stop  and we're gonna say everything that is in the band  for services that also a PT tag, which is  what these guys are because I can click it  and he is wrapped up in a PT tag. There it is there. And I can say, scroll down. So anything that's banned, that is a PT tag. If you happen to meet this criteria,  can you lower your font size down to pixels, uh, to 20  Or maybe 30, No, 24. Okay, so it's just a bit smaller when it gets down to here.

One thing I'd also like you to do, if you're a P tag  and you happen to be in band services  and you're happen to be on mobile is I'd like you to go up  to the top here and I'd like you to play around  with the padding Now. Why don't I just, uh, horizontally, uh, sorry. Um, center it vertically. It's a real big pain. Weirdly. You can, um, do horizontal, uh, sorry.

Horizontal centering really easy, especially with text. It's just the option here. It says center,  you can do it with diviv tags. You can do all sorts of things really easily horizontally,  vertically though it's a huge big pain. Go off and Google it. Um, check out CSS tricks.

They've got a really good explanation of it  and how to get Roundup, but there's,  there's probably about 10 methods to do  and they all have different times  that can be used and can't be used. So, um, I've just faked with a bit of padding. There's it pretty, uh, it works. Is it, uh, pure, lovely code? No, it's not. Okay, so let's have a look at the two different sizes.

So I'm gonna do a file save here. So, um, when I'm down at mobile, it's left aligned  and it's centered and it's a smaller size. And when we're going out for desktop, it's big. Probably need some padding out here as well. So I could go through and do it for maybe, um,  for my giant view, I can make a, um,  specific media query just  to push it down to the bottom here. Or I might do some stuff on my images to lift them up.

Alright, that's it. We're getting it. We're, uh, it's looking a little cleaner now. Uh, let's get onto the next video.