Subscribe or Login to watch video

Login or Subscribe to watch video

43 - Making the fonts smaller in Bootstrap mobile view using Dreamweaver


Questions & Comments

Andy - 7 months ago

Hi guys,

I'm having issues with the main css code when trying to edit font size. First, even though all media quires have been entered, I can only see the first (mobile) in the Media Quires window (once Main.css has been selected).

My second issue is this:
-----------------------------------------------------------------
}

/*Mobile View*/
@media (max-width: 413.98px){

.title-text1 {
font-size: 14px;

}


.title-text2 {
font-size: 14px;

}

}
/*Tablet View*/
@media (min-width: 414px and (max-width: 767.98px){

.title-text1 {
font-size: 14px;

}

.title-text2 {
font-size: 14px;

}


/*Laptop View*/
@media (min-width: 768px and (max-width: 919.98px){

}


/*Desktop View*/
@media (min-width: 920px){

}

--------------------------------------------------------------

instead of the 'h1' that you've entered for the tutorial, I need to add custom css selectors that I've used for the text (e.g. 'title-text1'). The thing is, they are being highlighted in dark red within the code (so I must have added them wrong).

Any suggestions would be much appreciated.

Thanks

Administrator Tayla Coman - 7 months ago

Hmm I dont think I understand the first question properly, could you try rephrasing it?

Second question: Is it just dark red in Dreamweaver? Sometimes Dreamweaver bugs and this happens when nothing is actually wrong. The CSS seems to be tidy and clean so I can't see a problem there.

Andy - 7 months ago

Hi Tayla,

Thanks so much for your reply. I've only used the code in Dreamweaver but if everything is clean, it must be a bug.

Sorry, the first question is regarding what the @Media window displays (once the main.css is selected in the Sources window, the @Media window should display all the resolutions I've just entered in the code above). However, only the first resolution in the code (for mobile) is displaying.


One thing it could be is the method I've used. Not sure about anyone else but I had real trouble adding the resolutions to the CS code via clicking + arrow on the media queries at the top of the page (as when the small window came up to enter a min, max or min-max, it wouldn't allow me to select main.css. (just Define in Page and Create a new CSS fIle). I've tried clicking the query bar before the + marker and it still doesn't work.


Due to this, I could only add the first mobile query using that method. The rest, I entered manually into the code. Could this be the reason?


Thanks

Andy

Administrator Tayla Coman - 7 months ago

A few things it could be. First I'd try removing any decimal places from media width definitions in pixels, a pixel cannot technically have a decimal place in it's sizes. Re-adjust that and let me know how it goes.

Andy - 7 months ago

Ah, I think I may have found the main reason. When I first loaded up my Bootstrap document, I didn't want the default resolutions, so I clicked Customise button and entered 3 of my own. However, if you see the image attached, they have all been entered as minimums.


I've even hunted through the Bootstrap code (when Dan first suggested copying from this as one method, at the start of the video) but all I could see was min's and no min-max css lines. Now I think I know why.


Would you guys agree with this? Is this reason why only the mobile resolution was showing in my @Media window, was because there is no min-max css lines in my Bootstrap code?

Thanks

Andy

Andy - 7 months ago

Hi Tayla,

Sorry, I didn't see your response when I posted my last reply. I've tried adding them as just min's and they all display fine in the @Media window (just not sure if this will work correctly with the text sizing edit commands).

I will also try the code I posted again, with your advice on the decimal points, just in case. Thanks :)

Andy

Andy - 7 months ago

It's all good :)

Strange thing is, I entered everything as just minimums first. The @Media window instantly picked up on them. I then edited the others to min-max (even with the decimals - but I've taken your advice and ditched them anyway, just in case they cause future issues) and the @Media window instantly updated them. How strange is that?

Oh and ignore my silly comments about just having minimums in the Bootstrap code. I've just remembered that successful edits to the Main.css would edit that anyway lol


Thanks for all your help Tayla :)

Administrator Tayla Coman - 7 months ago

Awesome to hear you got it sorted, well done!

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

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.

ALL ACCESS: $19.95 per Month + Cancel anytime