Understanding how fonts change size in Bootstrap mobile view

This lesson is exclusive to members

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

0
0
0
0

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hi, my name is Dan. In this video we're gonna look at the second part  of meta queries where we look at CSS styles. In the previous video, we looked at using meta queries  to play around with the structure  or the column widths in bootstrap. This one here relates more to CSS styling,  so we're gonna look at it separately  with its own little project window here. Once we've finished with this little 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. So first of all, I'm gonna create an empty document here.

Uh, it's gonna a new document, no framework,  just plain old HTML page. I'm gonna save it. I'm gonna call this one  mob, uh, styles demo. Great. And I'm gonna be in split view  so you can see what's happening on both sides. Um, what you'll notice is that there's no media queries here  'cause we just, we've not a bootstrapped document.

Bootstrapped comes with its own  media queries that we follow. In this case, I'm gonna create our own ones just  to help you understand what they are and what they do. So first up, I'm going to drag this little slider along  and I'm gonna make three separate media queries. Um, has four, I'm just gonna do three to make it easier. So I'm gonna do a small mobile version,  a tablet version, and a desktop version. So I'm gonna drag it down, okay.

To a mobile size roughly. And I'm gonna hit this little plus button  and um, this max width, um, uh, I'm gonna leave here  and I'm gonna click okay  and I'm gonna, it's gonna create a CSC sheet for me. I'm gonna call this one, um, mob demo. We'll throw this one away in a sec  so I'm not too worried about the naming. Okay. And I'm gonna hit save.

Now what it means is, this is anywhere up  until here is gonna be my CSS media query for mobile. What I wanna do is a tablet version. So I'm gonna drag it up a bit higher, okay. To about there and hit plus. And what I wanna do, instead of just Max,  I'm gonna do min and max. So the minimum width is just gonna be a pixel  higher than my mobile.

So when it gets up to 3, 3 8, it's gonna switch to um,  tablet view and that's the maximum size there. I'm just put it as 700 to round things off. Okay? So this is mobile, this is tablet  and I'm gonna do desktop view. And desktop view is just gonna be one pixel  more than my tablet. And it doesn't really matter.

We have this, okay,  it's handy, but if I click plus  and I don't like it, I can change it to, I want a 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 I'm just type it in here. So it's gonna be 7 0 1, it's gonna be my desktop view. So I've got three media queries.

Um, you can't see them down here. The body is nice and clean, okay, on the h TM L. But if I go to my CSS, you'll see three of them. This one here is my, uh,  this one here is gonna be my mobile. This one here is gonna be my tablet. And this one here is my desktop.

So, um, let's add some content to my HTML. Okay, so I'm gonna go back to split view. Go to source code. And over here in my body I'm going to insert, uh, heading  and uh, change the text. Okay? What I'd like to do is style it so that when it um,  gets down to desktop, it's quite a large bold color.

And when it's tablet, it's 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 gonna do for mobile first. And so I've got my slider down  to mobile here just to preview it. And what I'm gonna do is I'm gonna go  to my CSS designer view. And up until now we've had this closed this media, okay?

And we've just been working on our large desktop view. And what we're gonna have to do is  open 'em up so you can see. And what we're gonna do is we're gonna create a style. It's gonna be in my mobile view, the green one, uh,  with a maximum of 3, 3 7. And I wanna create a selector and it's gonna be my H one. And what I want to do is, when it is H one, I'd like it  to be a font color of let's go red.

Okay? I want it to be a font size of something small. Maybe 20 pixels is my heading. Uh, great. So when it's down at mobile, it's 20 pixels and red. And when I make it up to tablet, which, what happens, okay?

It's not, okay. So that only gets affected when I am at this maximum width  of 3, 3 7. And you'll see at my CSS view, see it on here. So what happens is this H one here only gets activated when  this rule here is applied. Okay? So there's a no maximum width of 3, 3, 7, anything  above that, it will switch out to this tablet view.

And because there's no H one styling in here,  it goes from this, okay? Red and 20 to whatever the default is. So to do the adjustments, um, I'm gonna be in 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 gonna make a new selector.

This one's gonna be H one. And I'm going to do something with a text. I'm gonna make it green  and I'm gonna make the font size a bit bigger. So maybe up to 40. Great. 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 get out to desktop,  the exact same thing I can go to, um, this one I can go  to my larger desktop view, go to selector, go to H one  And make it a font color, something slightly different. Uh, blue. Let's go to font size and let's make it massive. Let's go it up to 60. Okay, enter. Now I've got my three different media queries, okay?

And they only get activated by how wide your page is. So let's go out and preview it in a browser. It's gonna ask me to save. Yes, please. You can see here desktop view, Table view,  and ugh, I can't get small enough to show you mobile view,  but know that if my browser got a little smaller,  okay, can I get any smaller? No, can't get any smaller.

Um, it was switched to red. Alright. Hopefully that gives you a bit of a indication  of the two separate areas, um, to deal  with when you're dealing with mid queries. One is gets, it triggers the width of the box. And we did that with the SM excess, md, lg,  okay, the different sizes. And then there's a separate one here where we are dealing  with, um, the style of things like the fonts.

You can change the height of boxes,  um, whatever you want in them. As long as they're contained in these curly braces to do  with this media query, they'll get activated at this time. Alright, let's move on to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025