Subscribe or Login to watch video

Login or Subscribe to watch video

40 - Understanding how fonts change size in Bootstrap mobile view


Questions & Comments

Goran Nikolov - 1 year ago

Hey, i was watching this over and over and can't get it to work over here.

I mean I have container where everything from headlines, sub-headlines, images and whole article will be in, and it's not responsive.

Take a look at the video and let me know where I am wrong: https://www.youtube.com/watch?v=CGZFkorHvig&feature=youtu.be

Thanks

Administrator Tayla Coman - 1 year ago

Hi Goran, is it just the image that isn't responding? Seems like the image might have set heights on it. please remove the set heights. If this doesn't work please upload your site to a dropbox and send me the link so I can have a look.

Goran Nikolov - 1 year ago

Where you see the Todays Diet TV logo USA flag, that part is ok. I mean that is one photo and it is working fine.

Everything below it can't make it work like the image above. If you saw the video, you'll know what I am talking about.

Anyway, here is the website so you can take a look: https://www.dropbox.com/s/zzi3nruylxqbnt3/Responsive.rar?dl=0

Thanks

Goran Nikolov - 1 year ago

Hey, I probably didn't expressed my self clearly.

I am talking about the white space, the container where will sit all my text is not shrinking as I resize browser and all.

I am not talking about not responding images.

Thanks

Goran Nikolov - 1 year ago

Again, here is short video with what I have problem with and don't know where got wrong: https://youtu.be/ED5NGskPWG4

Thanks

Meyrick Kaminski - 1 year ago

This didn't work for me at first, and I think the problem was that the site was not defined. Once I went through it after creating a new site, saving the html file (as index.html) and defining the location of the CSS file, I could the media queries to display in split and live view.
For some reason though, Live Preview through different browsers continually comes up as an error, saying I need to save all the files to preview them. Not sure why that is. At least it works in DW...

Administrator Tayla Coman - 1 year ago

Hmmm interesting. Have you gone through the Adobe forums? Likely someone else has had this problem, could you also make sure all of your software is up to date?

Administrator Daniel Scott - 1 year ago

Hey Meyrick, it sounds like your files are a little mixed up. A site really needs to be defined at the beginning of the job. I'd have a look at your files listed in the head. Check the bootstrap.css for example. Its should be listed as <link href="css/bootstrap.css" rel="stylesheet">
or something similar. If it's referencing your laptops hard drive. That could be your issue. See how you go and let me know. - Dan.

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

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.

ALL ACCESS: $12 per Month + Cancel anytime