Lessons

Lesson Info

Adding Media Queries

So in my CSS file I'm gonna scroll down here. And I like to put mine down at the bottom. Some folks like to put them right in the page where they go, it's completely your preference, the browser doesn't care where they go. But, like I said, we tend to design without, or we tend to design with as much as we can do with CSS without taking into account the media types and then we go back and add responsive designs just to change things that we need. We like to have as little CSS as possible within our page. So then one thing we'll wanna change in here is we'll wanna change the way that content is behaving. And so what we're gonna do is in our CSS we're gonna add a media query. The media query's gonna be per screen, and we're gonna check for a certain width of that screen. So I'm gonna type an @ sign, then I'll type media, then a space, then we'll type screen, then we'll type and. So we're gonna combine the screen with some value. The value's gonna be set in parentheses, and what we're gon...

na look for is max-width. Type a colon and a space, and we're gonna look for 1100 pixels, and we don't need a semicolon here, just the max width and 1100. So what we're doing here is we're checking to see if somebody is on a screen, versus they're printing it, or a screen reader or any other media types, and the browser's less than 1100 pixels. If it is, we wanna make some changes to some of our properties, so let's add in our brackets. And now the CSS rules go inside of this media query. So the media query has a beginning and ending set of curly brackets. The rules will have their own sets of curly brackets inside of this. So we're gonna target .content, and again, because we named every one of our div containers with a class of content, we can set one rule here and target all of the content containers throughout all of those individual elements and make a sweeping change. So we have this sweeping change that locks the width. We can do a sweeping change on a media query now to make an adjustment when we're under that minimum width. So we're gonna set content. Put in our brackets. We're gonna set a padding-left property of 30 pixels. And a padding-right property of 30 pixels. The reason I'm not setting top, right, bottom, and left is because we have made some changes in some of those content areas like the header and the nav on the height, I'm sorry, on the padding-top and padding-bottom. So we just want to affect the right and the left, we don't want to affect the padding top and padding bottom. So making this one change will then make that media query kick in if the browser's less than 1100 pixels. Next let's make another change. So, let's type header. We're gonna use a greater-than sign, and we're gonna target .content. And what we're gonna do here is set a padding-right property of 45%. And actually, I don't need the greater-than sign. So, just heading content. So the content class inside of header will now get a padding-right of 45%. We set it to 35, but when the screen gets smaller and smaller, we're gonna need more and more room for that cutting board on the right-hand side, so we're just gonna keep increasing the size on that. And then lastly, let's come in and make a change to the logo. So a.logo, because that's absolutely positioned in the nav, put in our brackets, let's split this open, we're gonna set a left property of 30 pixels. We'll save our file, let's go back out to the browser, let's exit responsive design mode, let's hit reload. So now, again, we have our locked width but now when we get under 1100 pixels, we'll now see that the padding on the content changes. So now if I close down, notice that the edges of the browser don't get within 30 pixels of that content container. And that's happening down in the footer, that's happening in the Where In The World, it's happening in the Choices section, it's happening here, where I've messed up something, and it's happening up here in the navigation as well, 'cause again that same content structure is in our navigation, I'm sorry, it's in our main HTML elements. So again, this goes back to that original slide when we first started and we talked about our HTML strategy. It becomes really important how we break up our content in our page, and we have to pay attention to the design and how the design is going to adapt in the browser, because those sorts of behavioral changes in the browser are really reflected when we start doing our HTML structure. And with good HTML structure in place, we can make very few CSS rules and just really take control of that entire experience as we're going through our design and translating this to the browser. So with this in place, I'm going to go back to our project files, back into our snippets, and so now that we've created some media queries, let's go into our snippets four file. So in here, I've created two sets of media queries, one set that targets devices with a max width of 980 pixels and another set that targets the max width of 820 pixels. And if you look at this, you can see we're doing all sorts of the same ideas here. We're changing elements in the header, we're changing the choices section, which is one of the main sections for the area with the spices on the yellow border. And down for 820, we're making more adjustments to the header, changing things like the width and the height and the font size. Because we have that cutting board and the text, we have to make a lot more changes for the header as we get smaller and smaller. So let's copy that. Let's go back to our CSS, we'll hit a few returns. We'll paste all of that. As we start adding this, we'll see our preview starts getting nicer 'cause we're actually looking at a smaller screen in the preview, I'm only looking at about 600 pixels here. And so now, you'll see the type is wrapping here, because we've changed the width of the padding-right to about 45%. So, based on your design, based on how much you like elements to overlap, based on how much room you have for the positioning and the content, you're gonna make these changes, minor changes like this, based on your design. So there is no one set of measurements that's gonna work for every design. These are things you're gonna change as you go for each one of your designs. So I have a whole bunch of snippets here that will save us from a lot of typing. So let's open up snippets five file. Inside here I have a bunch of rules for 760, 700, and 600. So again, changing things like the image inside the header for 600, that's gonna make the cutting board much smaller. The negative 15 on the right is actually gonna push the cutting board off the screen a little bit, and since the header has an overflow of hidden, it's acting like a mask, that's not gonna give us any horizontal scrolling or anything. It's just gonna get the cutting board out of the way. Change that we're making at the 760, again, back to the header. Again, the header's the piece that has the most sort of complexity, so we need to change it often. Here we're changing some of the definitions and the content, and one of the things we're doing here for the content when we get to 760 is we are removing, in the define area, those flex properties that are gonna give us the columns. Because once we get too low, we don't wanna have the columns side-by-side. They're gonna get too skinny to read. We're gonna wanna stack them vertically so when we get down to portrait tablets and phone size, we just have those stack up. So it's great that the flex properties will give us the columns in the larger screens, and we're basically gonna undo it when we get down to this part here. So here's the flex spaces set to 100% for both the sides. Great, so let's come in here and just copy all this. Switch back over to our screen CSS. We'll hit a few returns, we'll paste that in. I have a few little, few little hiccups in here, but we'll just ignore those for the moment. And, I'll go back one more time and let's go into snippets_550. So in snippets_550, we're gonna be doing a bunch of things here. This is where we're gonna come in and change the behavior of the navigation, so I'll talk about this for a little bit and we'll make one adjustment on our own for what's happening inside of this navigation piece. So, down here we're going to go into the navigation, we're going to take those unordered list items, we're basically going to set those up so that instead of floating those to the right-hand side, stacking the list items inside and having them nested, we're going to treat that unordered list as just a giant list that will show up in a menu system. So, changing things like the display type, setting position back to static, which means they're not gonna position under their items, but they're just gonna flow. That's what some of these things are doing here to give us the effect of just creating that list. So we want the unordered list with the floating and positioning for the menu system. We wanna sort of undo all of that when we get to the smaller screens. And then down here we're using a sudo element here of a before, and we're adding in a bullet character. This way on a mobile screen, you can tell which items are submenus because we're gonna add a bullet if it's a list item that's inside of another list, unordered list inside of another unordered list. So if all of those things happen, then we're going to add a bullet to the beginning of that content. So let's come in here and select and copy all of this. We're also going to set the main figure, we're going to make that not text wrap, again, a few other nicer things. We'll hit a few returns and let's paste all of this in place. So with this in place, I'll reload on the side here. Now, when I close the browser down, and we get down to our mobile view, now when we get under 550, here's where we have all of our navigation items sort of stacked up. These little bullets, again, are being added by this character here. If I put a letter X in here, we would see an X and a bullet. So again, this gives us a really cool way to sort of add some content into the HTML without actually doing it in the HTML markup. And so inside of the 550 rule, we wanna add a couple of more properties. So we had that mobile menu that we created and we set the display type to none. So, let me show you how you would add some of these properties to create the behavior for that mobile menu. So we'll do a nav, space, pound sign, mobile_menu_icon, put in our brackets, and we're simply gonna set the display type to block. Now when we're under 550 pixels, we'll be able to see that menu item show up. So here's that menu icon showing up at the very top here, so when we're above 550, it doesn't show up. When we're below 550, it shows up. I've also positioned the logo over to the right-hand side of the screen.