Making the fonts smaller in Bootstrap mobile view using Dreamweaver

Hi, my name is Dan. In this video we're going to look at how to apply our Media Query Styles to our design. Now in this case, we're going to do something nice and easy. See this Type up along the top here, it says, "Let's make things awesome." What we're going to do is re-size it depending on the browser size. So when it's down to Mobile, it's going to be quite small, when it's Tablet, it's going to be medium, and when it's a Desktop, it's going to stay this nice large font.

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, the teal one, and the purple ones. They exist, but they are a 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. To do it, 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 6618, there's one of the Media Queries, and you can scroll through and find where are the other ones. Just copy and paste them out. That's one way of doing it. I'm going to do it in Live view.

To do it, all we really need to do is, at the top here, I'm going to open up my css, so I can see down the bottom here in Split view. It being applied into the right css. I'm going to drag my little side bar along here till I get close to where I need to be. 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 want to zoom out, just to show you, there's this one, this one, there's four of them. So I'm going to be out of this size. Actually I'll zoom in a little bit. I want to be at this size here.

To recreate it, I'm going to hit the '+' button. And max-width is what I want. I want it exactly this number here, which is 767. So I want it to be 767. And it's going into my main css. I'm going to click 'OK'. Nothing really happens at the top here but can you see, my css down the bottom, I've got this new Media Query, there's nothing inside of it. What I'm going to do just to make it very clear which one this is, is I'm going to add some commenting. We haven't done any commenting yet. So, commenting in css-- I'm going to go to Full Code view. It just allows me to add text to myself. It's not for the computer to read. It's just so that I can visually see what things are.

To do it, commenting, over here on the left hand side, if I hold this down, if you're commenting in HTML, you have to use this syntax, but we're in css, I'm going to delete that. We're going to be css commenting, which is this one here, the second one down. So forward slash, and star, '/*'. And inside here, I'm going to type in 'Mobile View'. And anything that's in here gets ignored by the browser. So it's just for me to see, or other developers to see, and to help understand what's going on underneath. So that's the first one. Let's look at doing the next one.

So I'm going to go back to Live view. I'm going to make sure, on my main css, I'm going to drag this along. Doesn't really matter where you drag it, get it close. And this one here, we did max-width, and you can tell it's the right one, because this max-width is green. This one here though is a max and min, and it gives this teal color, ignore this purple one underneath. So this teal color is the one that has the maximum and the minimum. So, we want it to go 'min-max', this one here. You'll see it turns a teal color. So the min-width is one pixel more than our small version, which is 768. And the max in this case is 991. I'm just copying what Bootstrap's done. It's going into my main css, click 'OK'. And I'm going to check my main.css, there he is there. I'm going to copy this. So there's my min-max.

Now I could sneakily do this now. Copy, and paste. This one here was 'tablet', this one's going to be 'desktop'. And I could just change it in the Code view here. Can't remember off the top of my head what it needs to be. So it needs to be 992x119. I'm going to jump back to my css. 992x1199. That's it. So you could do in Code view, totally fine.

And we'll look at the last one. And this one here is slightly different, so let's look at the colors. Remember, green is max-width. So that's anything up until here. The green ones are anything between the two. So minimum of this, and maximum of that. We've done the second one, and this last one here is our minimum width. So minimum width, on to infinity for extra large desktops. Very rarely I do it this way. And I'm going to do this one, it's going to be minimum width. And it's going to be min-width of 1200. Going to my main css, click 'OK'. And let's quickly check in my main css again. And you'll see, there's my other Media Query. Let’s add our commenting and this one is 'Xtra Large'. 'Desktop View'. Great.

Next thing I need to do is understand where all the rest of these codes should go. So we got these guys, and we've got this section at the top here that aren't in any Media Query, just hanging up by themselves. They call these guys, at the top here, Global. So these apply to everything. And what can happen is, you can have pretty much all your Styles up here in Global. You can kind of see the term 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. It needs to be a bit more specific. So to do that, what I'm going to do is find my H1. He's in here somewhere. Mine is on line 36, yours would be on some other line. Doesn't matter where. But you can see here, if I grab this guy-- I'm going to copy him. We do it in two ways, we do it in Code view. So I go down to Mobile view, making sure you keep it inside those parentheses. There's an open there, and a close down the bottom, keep it inside. Remember, returns don't matter in code. So I'm going to paste this guy. I've got my H1 in here. What we're going to do is change-- I don't want to change the color, actually I will just to make it visually clear, actually no. I would just change the size. I'm going to delete everything in here, I don't need to repeat myself because that's up there in Global. All I want is change is its size, so I'm going to get it down to something small, like '18 pixels'.

So what's going to happen is, Global is going to run until it gets to this Mobile view and then it's going to overwritten by this font size. Let's give it a go. Remember, 'File', 'Save All'. I'm going to preview in my browser. Actually I'm going to use the device preview. So, large size, applying the Global size, but when it gets down to Mobile size it switches out and applies that other H1. 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, 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.

To do it in Live view, let's move our slider to Tablet. I'm inside this guy here, I'm going to zoom in a little bit actually. He's in Tablet. What I want to do now is, in my main css, I want to find-- you can see, here's my css styles. If you can't find, you're on Media Queries, that might be closed up like that. So click and drag that bottom part down. So what I can do, if I put in Global, it's going to go above all my Media Queries, and apply globally. Currently that's where my H1 sits. So what I want to do, we've done the one for max-width, which is my Mobile view, you can see here. The only thing in that Media Query at the moment is the H1. There should be nothing in this one here, which is my Tablet. So I'm going to apply a Selector here. I'm going to call this one 'H1'. Click 'Enter' couple of times. And I'm going to go through, and I'm going to go to 'Font', and 'Font Size'. And I'm going to change the Font Size to '30'. Scroll up, there he is there, he's 30. So I'm going to go up to my browser, and watch this, I've got this big version, which is in Global. Then we get down to smaller Desktop, nothing's changed in that one. Get down to Tablet though, it goes down to a smaller font size, and it's smaller again in Mobile.

You can work your way through and apply different font sizes because it's quite a big title. What you don't want to do is write on two lines so I'm making sure that when it's down to 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 we need to do is, you can 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 you've used in terms of the styles, fonts and this big font here, we can make it smaller. Let's do that one together.

I figure out what he is. This one here is a Style H2. So I'm going to go through and apply one to Mobile. I'm going to apply Media Query, sorry, I'm going to apply 'Selector'. Use the up arrow till I can adjust the H2, or I could type it in. And I'm going to make the font, the font size. And I'm going to make him a lot smaller, so I'm going to get down to 'Pixels', and I'm going to get down to '20 pixels' again. Actually, probably a little bit bigger, '30 pixels'. Why isn't it updating over here? It's because my slide bar is still lined up with Tablet. So if I get down to Mobile now, here he is there, he's adjusted. 'File', 'Save All'. Jump out to Desktop version. Try it smaller, smaller, smaller. Here we go, he's down here. We need to do some cleaning up in terms of what it looks like on Tablet. You can see, it's not lining up here. It's lining up perfectly in Desktop but not when it gets down to Tablet. We'll fix that in one of the later videos.

One of the last things I'd like to do before we finish this one is, it's similar, same thing. We're going to create a Class inside our Media Query. What I want to do is, watch this, when it gets down-- at the moment it's centered. So when it's out at large, the centered makes sense. It's centered within here. Looks good underneath the icon. When it gets down to Mobile you'll notice that the centering doesn't make a whole lot of sense. It's kind of sitting at the top here, and it's-- I want it to be Left Aligned. So what we need to do is figure 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 used called 'text-option 1'. Where else was he used? He's used here as well. In this case it's going to work out fine because what I want to do is, when it gets down to Mobile, I want it to force it to go Left Aligned, which is not going to affect this guy at all. If it did, if this guy wanted to stay centered, I would then have to create another Class around this bit of text here, so I can control it in Mobile view. I'm going to click on this guy. I can see one called 'text-option 1', great.

I'm going to make a Class in-- I'm going to put it in 'main.css',. We're going to put it in 'max-width' of '767' which is my small Mobile view. And down the bottom here, I'm going to click on 'Selector'. And it's picked a whole bunch of junk. I can use the up arrow to get down, but actually I don't want to do it to this one. I could Style the text center, problem is, that's one that was written by Bootstrap, and I'll probably use that over and over on this side. I don't want it to be tied to this weird little thing that I'm doing just for our services text. So 'text-option 1', click 'enter'. What I want to do is, go down to 'Type' and say 'Left Aligned'. So what's going to happen is, watch this, if I drag it out, it's going to be centered but when it gets down to the smaller view, it's going to Left Aligned.

What I could do now as well is increase the padding all 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 going to be? Watch this, if I start dragging it out, and it starts lining up, awesome. Perfectly starts lining up to Mobile but what's going to be the ramifications for that? Correct. It's because I've used Text option 1 up here already, can you see, I've added Padding to this one. I'm not going to do it now but what I should do is, we'll go through and create its own Class. I rarely use this one here. 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 and go through and call them-- we'll give this one a specific name. So maybe 'text-services'. And I'll go through and not be styling the Text option 1, and just do text-services. I want to move the padding of this one, and we'll look at cleaning it up in one of the later videos as well. 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.