Hi, my name is Dan and in this video we're gonna look at  how to apply our media query styles to our design. Now in this case, we're gonna do something nice and easy. See this type of long top here,  it says, let's make things awesome. What we're gonna do is resize it depending  on the browser size. So when it's done at mobile,  it's gonna be quite small when it's tablets can be medium. And when is it desktop?

It's gonna stay this nice large color, okay? Or large font. Now the first thing we need to do is we need  to recreate the media queries in our own CSS at the moment. These media queries along the top here,  you can see the green one and the teal one. And the purple ones, they exist,  but they are part of bootstrap  and we know that we can't adjust bootstrap, that's bad. So what we need to do is recreate the exact same media  queries in our own CSS  and to do it, there's uh, there's loads  of ways you could go into bootstrap CSS, have a look  through the code and figure out  and find like this line here on, uh, 6,618.

There is one of the media queries and you can scroll through  and find one of the other ones and  just copy and paste them out. Now, that's one way of doing it. Um, I'm gonna do it in, uh, live view, okay? And do, all we really need to do is at the top here,  we're gonna open, I'm gonna open my CSS  so I can see down the bottom here  and split view, um, it being applied into the right CSS. Um, I'm gonna drag my little, um, uh,  sidebar along here till I get close to where I need to be. Uh, I'm not worried too much about it, where it goes.

I can type over the top, remember, so I've got it lined up  with this first media query that I want. I'm gonna zoom out 'cause there's just, so yeah,  there's this one, there's  this one, there's this one, this one. So there's four of them. Okay? Um, so I'm gonna be out at this size. Actually, I'm gonna zoom in a little bit.

So I'm gonna be  out at this size here to regret it. I'm gonna hit the plus button and um,  max width is what I want. Okay? And I want it to exactly this number here, which is,  uh, 7 6 7. So I want it to be, uh, 7 6 7. And it's gonna go into which,  it's gonna go into my main CSS.

I'm gonna click okay. Now,  nothing really happens at the top here,  but can you see my CSS down the bottom? I've got this new little media query. There's nothing inside of it. Okay. What I'm gonna do, just  to make it very clear which one this is,  is I'm gonna add some commenting.

We haven't done any commenting yet. So commenting in CSS, um, I'm gonna go to full code view. It just allows me to add text to myself, okay? It's not for the computer to read, it's just so  that I can visually see what things are to do it commenting. Um, uh, over here on the left hand side,  if I hold this down, um, if you're commenting,  commenting in H TM L, you have to use this syntax. Okay?

Um, but we're in css. I'm gonna delete that. We're gonna be using CSS commenting, which is, well,  which is this one here, okay? The second one down. Okay. So forward slash um, and star.

And inside of here I'm gonna type in mobile view. And anything that's in here gets ignored by the browser. So it's just for me, um, to see or other developers to see  and to help understand what's going on underneath. Great. So that's the first one. Uh, let's look at doing the next one.

So I'm gonna go back  To live view. All right? I am going to make sure my main CSS,  I'm going to drag this along. To be honest, it doesn't really matter  what you drag it, um, get it close. And, and this one here is we did max width  and you can tell it's the right one  'cause it's wax with was green. This one here though is a max and minimum.

And it goes this tely color. Ignore this purple one underneath. So it's this tely color is the one  that has a maximum and a minimum. So we want it to go, um, max, uh, MinMax, this one here,  you'll see it goes this kind of purpley  color, sorry, teal color. Um, so the minimum width is one pixel more than our small  version, which is, um, 7, 6, 8. And the max in this case is 9 9 1.

I'm just copying what bootstrap have done. It's going into my main css click. Okay. And I'm gonna check my main Cs, uh, my main css  And there he is there. Okay,  so I'm gonna copy this. Great.

So there's my moon max. Now I could sneakily do this now, copy and paste. So this one here was tablet. This one's gonna be  Uh, desktop. Okay? And I could just change it in the code view here.

I can't remember off the top of my head what it needs to be. Um, So it needs to be 9 9 2 by 1 1 9. So I can just jump back into my CSS  9 9 2 by 1 1 9 9. Is that right? That's it. Cool.

So you could do it in co view, totally fine. Uh, and we'll look at the last one. And this one here is, uh, slightly different. So let's look at the colors. So remember, green is a max width. So that's anything up until here.

The green ones are anything between the two. So minimum of this, a maximum of that. We've done this Second one  and this last one here is a minimum width. Okay? So a minimum width onto infinity  for extra large desktops. So I'm gonna do it this way and I'm gonna do this one.

It's gonna be a minimum width and it's gonna  be minimum width of  1200. Go into my main CSS click. Okay? And let's quickly check in my main CSS again,  and you'll see there's my other media query. It's add our commenting,  Okay? And this  one is, um,  extra large desktop view.

Great. Okie dokie. Um, next thing I need to do is understand, um,  where all the rest of this code should go. Okay? So we've got these guys  and we've got this um, section at the top here  that aren't in any media query. They're just hanging out by themselves.

They call these guys at the top here global. So these apply to everything, okay? And what can happen is you can have pretty much all your  styles up here in global, okay? You can kinda see the tome global  over here on the right hand side. So everything that is not in these media queries is applied  globally unless it's overwritten by any of these guys. Okay?

'cause these are a bit more specific. So to do that, um,  what I'm gonna do is I'm gonna find my H one. So he's in here somewhere. Where is he from? Mine's online. Um, 36 euros will be on some other line.

Doesn't matter where, but you can see here,  if I grab this guy, I gonna copy him. We'll get to two ways. We'll do it in co view. So I'll go down to mobile view  and making sure you keep it inside those parentheses. Okay? There's an open there and a close down the bottom.

Keep it inside. Never spaces don't, um,  returns don't matter in code. So I'm gonna paste this guy. So I've got my H one in here. Now, um,  what we're gonna do is, um, change. I don't wanna change the color actually, I will just, uh,  make it visually clear.

Actually no, I'll just change the size. So I'm gonna delete everything in here. I don't need to repeat myself  'cause that's up there in global. All I want to do is change the size. So I'm gonna get it down to something small like 18 pixels. So what's gonna happen is global's gonna run until it gets  to this mobile view and then it's going  to be overwritten by this font size.

Let's give it a go. I'm gonna file save. I'm gonna preview in my browser. Actually I'm gonna use the device preview. Great. So large size applying the global style,  but when I get down to mobile size, it switches out  and applies that other H one.

Great. So let's go and do it for tablet view  and desktop view, just to show you all the  different views as we go along. Um, and show you different ways of doing it. We've done it in code view. Let's have a look at  doing it in live view. So to do it in live view, uh, let's move our slider  to tablet.

Okay? So I'm inside this guy here. I'm gonna zoom in a little bit actually. So he's in tablet. Um, what I wanna do now is in my main CSSI wanna find,  you can see here's my CSS styles. If you can't find your media queries  that might be closed up like that.

So close click and drag that la bottom part down. Okay? So what I can do, if I put it in global, it's gonna go  above all my media queries, okay? And apply globally. That's currently, that's where, um,  my H one sits. So what I wanna do, and we've done the one for, uh,  my max width, which is my mobile view.

And you can see here the only thing in  that media query at the moment is the H one. And there should be nothing in  this one here, which is my tablet. So I'm gonna apply a selector here. I'm gonna call this one H one, enter a couple of times  and I'm gonna go through, scroll up, where are you there? He's there and I'm gonna go to font  and I'm gonna go to font size  and I'm gonna change the font size  to what have we got? 30.

Scroll up. There he is there, he's 30. Okay. So I'm gonna go out to my browser and watch this. So I've got this top big version, which isn't global. Then we get down to the smaller desktop.

Nothing's changed in that one. Get down to tablet though. And it goes down to our smaller font size  and then smaller again in mobile. Okay? And you can work your way through  and apply different font size 'cause it's quite a big title. I want it to kind of, what you don't want it  to do is break, okay?

Onto two lines. So I'm making sure  that when it's down at a small size,  it's still only on one line. And that's what I've decided to do. What we also need to do is we've just done the title here. And what I'll get you to do is, um, you could go through now  and say this title here, we can adjust. So let's go and have a look at that one.

We'll do that last one together, what we are. And then you can in your own time adjust the styles  for say the P tag  or whatever we've used in terms of the styles  for say this big font here. We can make it smaller. Let's do that one together,  figure out what he is. Okay, this one here has a style of H two, right? And so I'm gonna go through and apply one to my mobile.

I'm going to apply media query. Actually, I'm not sorry, I'm going to apply a selector. I'm going use the up arrow until I get just the H two  or I could type it in and I'm gonna make the font  and I'm make the fonts size  and I'm gonna make 'em a lot smaller. So I'm gonna get down to pixels  and I'm gonna get down to 20 pixels. Again, actually probably be a little bit bigger. 30 pixels.

Why isn't updating over here is  because my little slide bar is still lined up with tablets. If I get down to mobile now, there he is there,  he's adjusted file save all, jump out  to my desktop version. Drag a smaller, smaller, smaller, ready to go. He's down here. Okay? So we need to do some cleaning up in terms of, um,  what it looks like on tablet.

'cause you can see it's not lining up here,  it's lining up perfectly in desktop,  but not when it gets down to tablet. But we'll fix that in one of the later videos. All right? One of the last things I'd like to do  before we finish this one is it's similar, same thing. We're gonna create a class, um, inside our media query. And what I wanna do is watch this when it gets down.

At the moment, it's centered. So when it's out at the large,  the centered makes sense, okay? It's centered within here, looks good  underneath the, uh, icon. But when it get down to mobile, you'll notice  that the centering doesn't make a whole lot of sense. And there's, it's kinda sitting at the top here  and it's, uh, I want it to be left aligned. So all we need to do is figure out if there's a class  controlling this guy.

If there's not, you might have  to add one specifically for this task. But I can see here, there's a class we use called  text option one. Okay, where was the house? Was he used? Was he used somewhere else? He's used here as well.

Okay, in this case it's gonna work out fine. 'cause what I want to do is when it gets down to mobile,  I want it to force it to go left Align,  which is not gonna affect this guy at all. If it did, if this guy wanted to stay centered,  I would then have to create another class around, um,  this bit of text here just  so I could control it in mobile view. So I'm gonna click on this guy. I can see one called text option one. Great.

So I'm gonna make a Class N  so I'm gonna put it in my main CSS,  we're gonna put it in my max width of, uh, 7, 6 7,  which is my small, uh, mobile view. And down the bottom here, I'm gonna click a selector  and it's picked a whole bunch of junk. I, uh, can use the up arrow to get down,  but actually I don't want to do it to this one. I could use, I could style the tech center problem is is  that's one that was written by Bootstrap  and I'll probably use that over and over in the site. And I don't want it tied to this weird little thing  that I'm doing just for our little, um,  services page here or services text. So text option one, click into, what I wanna do is gonna  to type and say left the aligned.

Okay? So what's gonna happen is watch this. If I drag it out, it's gonna be centered, okay? But when it gets down to the smaller  view, it's gonna be left to line. What I could do now as well is increase the padding along  the top here to get it to line up a little bit more. And that would work.

But can  you imagine what the problem's gonna be? Which that's if I start dragging it  out and that starts lining up. Awesome. Perfect. So that's lining up a mobile,  but what's gonna be the ramifications of that? Correct.

It's because I've used text option  one up here already. Okay. Can you see? I've added padding to this one, so, uh,  I am not gonna do it now, but what I should do is I would go  through and create its own class. I reuse this one here, uh, and it's caught me out  because I want to do specific stuff to this. So what I do now is create its own class, uh, and go through  and call the, give this one a specific name.

So maybe text and call it, um, services. And I'd go through and not be styling the text social one  and just do text services. So I'm gonna remove the padding off this one  and we'll look at cleaning that up in one  of the later videos as well. All right. So that's how  to create media queries in your own CSS sheet  and then start applying them depending on the view  of the browser.