Create Custom Media Queries in the Bootstrap Framework
Lesson 24 from: Create Websites with DreamweaverMelissa Piccone
Create Custom Media Queries in the Bootstrap Framework
Lesson 24 from: Create Websites with DreamweaverMelissa Piccone
Lesson Info
24. Create Custom Media Queries in the Bootstrap Framework
Lessons
Class Introduction
02:51 2Dreamweaver Project Overview
09:33 3Designing Web Page Comps in Photoshop
14:33 4Save Images for Web
19:55 5Getting Started in Dreamweaver
05:47 6What is HTML
17:42 7What is CSS
05:27 8Prepare to Create a Web Page
07:00Add HTML5 Sections to a Web Page
16:06 10Add and Explain CSS
05:21 11The CSS Designer
19:40 12How to insert a CSS Reset
07:18 13Styling Web Page Elements with CSS
08:31 14Styling with Fonts
10:28 15Understanding Floats and Clearing
05:40 16Creating Navigation and Inserting Responsive Images
23:01 17Styling Navigation Links
14:07 18Add Social Media Buttons
10:29 19Media Queries in our Simple Page
13:29 20Creating a Bootstrap Webpage
10:16 21Creating a Bootstrap Navigation Bar
10:29 22How to add Custom CSS to the Bootstrap Framework
03:42 23How to Create a Bootstrap Header Section
15:24 24Create Custom Media Queries in the Bootstrap Framework
05:48 25How to Create and Edit an About Us and Main Section
27:51 26How to add a Jumbotron Model using Bootstrap
13:35Lesson 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 Materials
Bonus Materials with Purchase
Ratings and 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.
Student Work
Related Classes
Web Design