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.