Create Custom Media Queries in the Bootstrap Framework

 

Create Websites with Dreamweaver

 

Lesson Info

Create Custom Media Queries in the Bootstrap Framework

Let's go ahead and create our own custom media query for that small one. So I'm going to go back in here and make this bigger... and I'm in my Donuts. And I'm going to do... I'm just doing it for the Donut, right, for the background image. So I'm going to go ahead and I'm going to do new media query. And my media query is going to be max width 767 for the extra small. This is the extra small screen. 767, click OK. Inside of this media query, I want to do Jumbotron Container Row. So, I'm actually, just going to go ahead and create the new selector, right? So, if you're a Jumbotron... Actually, I need to be down here, Container Row. It's here. Actually, it's not. It's where we put our background image. I'm not going to do it that way. I'm going do it in Donuts. We're going to click off of that Media Query. See if I can get out of that. I want to see. It's Hero Row, right? I still have to duplicate this. So, I'm going to right-click on this. I'm going to say, "Duplicate Media Query into t...

he Max Width." I go into the Max Width Media Query. I'm going to change my background position. And it looks like I am small so I can see what's going to happen. So, I'm going to go to Background. And right now, my Background position is 0% to 100%. I'm going to do a minus. I'm just going to place it off the screen, okay? So now, as we get smaller, and it's only in the sma-... only in the smaller one. Actually, I didn't do it in the small one, did I? Yeah, I know I did. Something weird's happening here. Okay. Hero Row, Max width, 767. Let's do it again for 550. So, we're going to make another one. Let's do an @Media Query. This one is going to be Max Width, 550, even smaller. Bootstrap does not have one for 550. So, this is our own custom one that we're introducing, okay? For 767, there is one in Bootstrap, but this one is brand new. So 550, click OK. Again, go back in here, Hero Row. I'm going to do this one. And I'm going to say, "Duplicate into Media Query, Max Width 550." Click on 550. Hero Row. I did them backwards. This one, I'm going to do the first one first. This one is actually supposed to be 776. I want to change my background size. We're going to Background. Okay. I am going to get rid of that. I don't need that. I need background size is 175 pixels, and Auto. I don't need that either. Remember because I don't... Because all these other ones get inherited, right, this way I'm getting rid of these. So, if I just jump into... Sometimes it's just easier to take a look, I'm in my Media Query, I don't need any of that. It's inherited. I want to do background size. I'm going to say, Background. And look it's helping me. Background dash size. Thank you. It took you long enough. My background size is going to be 175 pixels wide, okay? What was that? px, and then, space, auto semicolon. Okay. So now, I've resized it there. So now in the small parts... I don't need any of that. It's all getting inherited. I want to change my background position. What am I hitting? Background dash position. There we go. And I want my position to be minus 111 pixels. This is arbitrary. I would do my slider if I was in there. Pixels by 0 px semicolon. I got my semicolon up there? Yes, I do. Yes, I do. Yes, I do. All right. Let's try this again. So, let's save. Yes. Yes. Yes. Save it all. Here we go. So now, it just got smaller, right? And then I pushed it off to the side for the phone, right? I know it's hard to tell because I can't get this browser window to do it properly. But when we get smaller, there is more room for the logo, but I still have my donut. And then, I can also hide it. Like if you think, "Well, that look is dumb." Okay, just get rid of it. Just hide the donut altogether. Just say... you can turn Visibility to none. And that's how you would hide something, right? You don't want to delete it, right, because it will go away. But you can just hide it in there. All right. Awesome. That is our header section.

Class Description

Adobe recently announced significant changes to Dreamweaver, offering a brilliant new interface making websites easier to build–and more beautiful than ever before. Empowering non-technical users to build a website, this class you will teach you how to create a basic brochure-style website using Adobe Dreamweaver.


Adobe Certified Instructor Melissa Piccone shows you how to: 
  • Create a website from start to finish 
  • Apply web design best practices 
  • Understand Dreamweaver basics 
  • Customize Adobe Stock Templates 
  • Identify basic code to help troubleshoot 
Join us for this helpful class that will give you the tools you need to have your website up and running.


Software Used: Adobe Dreamweaver CC 2017

Reviews

lovemydreams
 

Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!

Kathleen
 

I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.

Linda Knapp
 

She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.