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.