Understanding how fonts change size in Bootstrap mobile view

Hi, my name is Dan. In this video we're going to look at the second part of Media Queries where we look at css styles. In the previous video we looked at using Media Queries to play around with the structure or the column widths in Bootstrap. This one here relates more to css styling. So we're going to look at it separately with its own project window here. Once we've finished with the project, after this video we'll throw away this video, and get back to doing the exact same stuff, but on our bigger, more complex website.

First of all I'm going to create a 'New' document here. It's a new document, no framework, just plain old HTML page, I'm going to 'save' it. I'm going to call this one 'mob-styles-demo'. And I'm going to be in Split view so you can see what's happening on both sides. What you'll notice is that there’s no Media Queries here. It's not a Bootstrap document. Bootstrap comes with its own Media Queries that we follow. In this case, I'm going to create our own ones, just to help you understand what they are, and what they do.

First up, I'm going to drag this slider along. And I'm going to make three separate Media Queries. Bootstrap has four, I'm just going to make it three and make it easier. So I'm going to draw a small Mobile version, a Tablet version, and a Desktop version. I'm going to drag it down to a Mobile size roughly. And I'm going to hit this '+' button. This max-width, we'll leave here, and I'm going to click 'OK'. It's going to create a css sheet for me. I'm going to call this one 'mob-demo'. I'm going to throw this one away in a sec so I'm not too worried about the naming, and I'm going to hit 'Save'.

Now what it means is, anywhere up until here is going to be my css Media Query for Mobile. What I want to do is a Tablet version, so I'm going to drag up a bit higher, upto about there. I'm going to hit '+'. And what I want to do is, instead of just 'max', I’m going to do 'min' and 'max'. So the minimum width is just going to be a pixel higher than my Mobile. So when it gets up to 338, it's going to switch to Tablet view. And that's maximum size there. I'm just going to put it to '700' to round things off. Click 'OK'.

So, this is Mobile, this is Tablet, and I'm going to Desktop view. Desktop view is just going to be one pixel more than my Tablet. It doesn't really matter whether we have this. It's handy, but if I click '+', and I don't like it, I can change it to 'max-width'. You can see, from here, all the way above. But I don't want it there, I want it one pixel after this. So let's type it in here, it's going to be a similar one. It's going to be Desktop view. So I've got three Media Queries. You can't see them down here, the body is nice and clean, on the HTML but if I go to my css, you'll see three of them. This one here is going to be Mobile. This one here is going to be Tablet, and this one here, Desktop. So, let's add some content to my HTML.

So I'm going to go back to 'Split' view, 'Source code', and over here, in my body, I'm going to insert a 'Heading', and, we'll change the text. What I'd like to do is Style it, so that when it gets down to Desktop, it's quite a large bold color, when it's a Tablet, a little bit smaller, and when it gets down to Mobile, it's even smaller. But at the moment it's not doing anything. So what we have to do is-- I'm going to do for Mobile first. I've got my slider down at Mobile just to preview it. What I'm going to do is, I'm going to go to 'CSS Designer' view. Up until now, we've had this closed, this Media. We've just been working on our large Desktop view. Now what we're going to have to do is open him up, so you can see.

What we're going to do is, we're going to create a Style. It's going to be in Mobile view. The green one, the maximum of 337. And I want to create a 'Selector, and it's going to be H1. What I want to do is, where it is H1 I'd like it to be a 'font color' of 'red'. I want it to be a 'font size' of something small, maybe '20 pixels', with my heading. So when it's down to Mobile, it's 20 pixels, and red, and when I make it up to Tablet, watch what happens, it's not. It only gets affected when I'm at this maximum width of 337. You'll see, in my css view, see the one here, what happens is, this H1 here only gets activated when this rule here is applied. So there's a max-width of 337. Anything above that, it will switch up to this Tablet view, and because there's no H1 styling in here, it goes from this, we're in 20, to whatever the default is.

So, to do the adjustments, I need to be on Tablet view. I'm going to be a 'mob-demo', I'm going to be this 'min' and 'max' which is my Tablet view. I'm going to make a new 'Selector', this one's going to be 'H1'. And I'm going to do something with the text, I'm going to make it green. And I'm going to make the 'font size' a bit bigger. Maybe up to '40'. So when it's down here, 20 and red, when it's a Tablet, it is green, and a font size of 40. And you can see, when I go to Desktop, exact same thing, I can go to this one. I can go to my 'larger Desktop' view, go to 'Selector', go to 'H1', and make it a 'font color', something slightly different.

Let's go to 'Font size', let's make it massive. Let's get it up to '60'. Now I've got my three different Media Queries. And they only get activated by how wide your page is. So let's go out and preview it in a browser. It's going to ask me, 'Save?', yes please. You can see here, Desktop view, Tablet view. I can't get it small enough to show you Mobile view, but know that if my browser got a little smaller - can it get any smaller? No, can't get any smaller. - it will switch to red.

Hopefully that gives you a bit of indication of the two separate areas to deal with, when you're dealing with Media Queries. One is, it triggers the width of the box. And we did that with the sm, xs, md, lg, the different sizes. And then there's a separate one here where we're dealing with the style of things like fonts. You can change the height of boxes, and whatever you want in them as long as they're contained in these curly braces to deal with this Media Query, they'll get activated at this time. All right, let's move on to the next video.