Desktop Resolutions

[?music?] 0:00 [Responsive Web Design: Media Queries: Desktop Resolutions] 0:02 [Nick Pettit] We've prepped our project and now we're ready to dive into media queries. 0:06 However, before we could get back to coding, there's a few things that we need to cover. 0:10 First, if you're not familiar with media queries, I highly recommend 0:15 that you watch the media queries videos in the CSS3 chapter. 0:18 You'll probably be able to follow along well enough without much of a primer, 0:23 but watching these videos first will definitely help. 0:27 In our code, we're going to use several media queries that build upon one another. 0:31 Each of these media queries will cater to a specific minimum resolution. 0:35 However, keep in mind that because of the cascading nature 0:41 of Cascading Style Sheets, each one of these media queries will be applied 0:45 to the next set of resolutions. 0:50 So for example, the styles that we include in our first media query 0:52 will also be applied to every media query that follows. 0:57 The second media query will also be applied to all the resolutions that follow after it and so on. 1:00 This will make more sense once we start coding. 1:07 Finally, I just want to remind you that we are intentionally setting our font sizes manually. 1:10 While it's certainly possible to create fonts that behave similarly to our fluid grid, 1:16 I personally prefer to set fonts manually so that you ensure they are always readable 1:21 without many edge cases. 1:27 Now we're ready to start into our media queries, 1:31 so let's go ahead and switch over to application.css, 1:34 grab one of these comment flags, go into rwd.css, 1:39 and paste it in. 1:44 The first one is going to be 1700px. 1:46 We'll go ahead and start our media query and say @media (max-width: 1700px) {. 1:52 Now, all we're going to be doing for these first few media queries 2:02 is changing the font sizes manually. 2:06 As I mentioned previously, you can make the font sizes responsive. 2:08 However, I actually prefer to set them manually 2:12 just to make sure that the font sizes are readable and there are no strange edge cases. 2:16 So first, we're going to select the header 2:23 and we're going to select the paragraph text inside of that header 2:26 and we'll change the font-size: 1.1em;. 2:29 Let's just go ahead and save that out and test this out in the browser. 2:34 One really easy way to test out media queries is to change the body background color 2:38 to a really bright color so you know that the media query is in fact working. 2:45 So we'll just go ahead and say background: yellow; 2:51 save that out, and we'll switch over to Google Chrome and refresh the page. 2:55 As you can see, that media query is indeed selecting this particular screen resolution. 3:01 So let's go ahead and adjust a few more of these font sizes. 3:08 Next, we're going to adjust the call_to_action button, 3:12 so we'll say #misc #call_to_action 3:16 and as we mentioned before, that text was way too large for the size of that button 3:20 so we'll go ahead and reduce it down to 1.3em. 3:25 Save that out, and when we switch back to the browser and refresh the page, 3:29 you can see that our call_to_action button now has a more reasonable font size. 3:35 So let's go ahead and switch back, 3:40 and next, we'll go ahead and adjust the size of our block quotes. 3:43 So we'll say #misc for the column, 3:47 and we'll select our blockquotes, 3:50 which is actually an element selector 3:53 and we'll say font-size: 1.4em; 3:56 We'll make some room to work here, 3:59 and next, we'll go ahead and style our features 4:01 so we'll say #features .feature .info 4:04 and then the paragraph text for the info about that feature 4:10 we'll set to a font-size: 1em;. 4:14 And then finally, we need to set a minimum height 4:18 on each feature block. 4:22 Let's just go ahead and switch back to the browser and refresh 4:24 and then we'll do that. 4:28 So if we refresh the page, we can see that our block quotes are now a more reasonable size 4:30 and if we scroll down to our features, the paragraph text there 4:35 is looking a lot better, 4:40 and we need to set a minimum height above each one of these features. 4:43 Now, I've picked out a height of 150px, which is a set height 4:47 but you can adjust this as needed, depending on your project. 4:53 The reason that we're doing this is so that these features don't get too scrunched up 4:57 against one another as the size of the browser reduces. 5:02 So let's go ahead and switch back to TextMate, 5:06 and we'll say #features .feature { 5:09 min-height: 150px;. 5:13 So we'll switch back and refresh 5:17 and we shouldn't see too much of a change right now, 5:21 but this small adjustment will help us a lot down the road. 5:25 So now, we're ready to move on to our next screen resolution of about 1400px 5:29 because when we start to resize the browser and make it a little smaller, 5:34 you can see that our layout starts to break down pretty quickly. 5:39 So we'll go ahead and switch back. 5:43 We'll copy our comment flag, close up this media query, 5:46 and we'll start our next media query down here. 5:53 We'll change 1700 to 1400, 5:58 and we'll say @media (max-width: 1400px) {. 6:04 Now, this screencast is being run at a resolution of 1280 x 720 6:11 so this 1400 pixels--and actually the resolution after this-- 6:16 should be applied immediately. 6:21 Each one of these resolutions is cascading on top of one another. 6:23 So we've already applied the 1700 pixels, which is for a larger screen resolution, 6:27 but when we apply the changes for 1400, you'll see that our current layout 6:33 will start to look even better. 6:39 So we'll do some very similar things here, adjusting the font sizes. 6:41 We'll say #header p { 6:45 has a font-size: 1em; 6:50 The second level headline for the #header h2 { 6:55 will also have a font-size: 1em;. 6:59 The #misc #call_to_action { 7:05 will also get a reduction in font-size: 1.2em;. 7:11 Our #misc blockquote { 7:17 will be reduced down to 1.2em; 7:21 and then, the info for our features #features. feature.info p { 7:26 will also be reduced to font-size: 0.9em;. 7:31 And then finally, we do need to adjust the minimum height 7:36 above each one of our features again, 7:40 so we'll say #features .feature { 7:43 and we'll set that to a min-height: 130px;. 7:47 So we want to make sure that this media query is being applied 7:52 so let's go ahead and set our body to a different color background 7:56 and we'll say background: green;. 8:01 So when we switch back to Google Chrome and refresh the page, 8:06 you can see that our background is now green, 8:10 our call_to_action button looks a little bit better; 8:14 we're not taking up two lines anymore. 8:17 Our block quotes are also a bit smaller. 8:20 Our paragraph text over in the header looks better. 8:22 The second level headline here underneath our logo is more reasonably sized 8:26 and down here, our features also look a little bit better. 8:31 The next resolution we're going to hit is 1200, 8:37 and here's where we start making more than just font size changes. 8:40 So let's go ahead and switch back to TextMate. 8:44 We'll copy our comment flag, 8:47 jump outside of this media query for 1400. 8:49 We'll change this comment flag to 1200 8:54 and we'll skip down here, 8:58 and first, we'll say @media (max-width: 1200px) 9:01 and we'll open up that media query. 9:09 And first, we're going to float the header to the left 9:12 because what we're actually going to do at this screen resolution 9:17 is make a major adjustment to the layout of the page. 9:20 We're going to make the transition from a 3-column layout 9:24 to a 2-column layout. 9:28 Now, we don't need to be quite as accurate with our fluid grids at these different resolutions 9:31 because we've already set them pretty well at the normal resolution or high resolution, 9:36 so we can sort of just eyeball it here. 9:42 We'll say width: 50%; 9:45 and we're going to give our header a little bit more of a margin-top: 10%;. 9:50 Continuing to rearrange our layout, we're going to float the misc column to the left 9:57 and we're going to clear: left; 10:06 and we'll set that to a width: 55%;. 10:09 On our #call_to_action button, 10:15 and on our #logo { 10:17 we're going to remove the margin-top: 0; because remember, 10:20 what is likely as the screen resolution gets more narrow, 10:26 it also may not be as tall, so we need to sacrifice a little bit of white space 10:29 above and below certain screen elements. 10:35 So next, we'll float the #phone to the left, 10:38 and we're going to set our blockquote { display: none;. 10:46 Now, you may be thinking that this will actually hide our blockquotes, and you'd be right. 10:52 What we're doing here is sacrificing a few of the less important elements on the page 10:57 in favor of increasing the size of other elements. 11:02 Remember, as the screen gets smaller, 11:06 screen real estate becomes more valuable, 11:09 so we need to start getting rid of a few of these less important screen elements. 11:12 Next, we're going to set the #wrapper { 11:17 to a width: 90%;. 11:23 Now, if we switch over to application.css 11:26 and check the size of our wrapper previously, 11:30 you'll see that it's at a width of 70%. 11:34 This percentage is being calculated against the width of the entire page 11:37 so by increasing the percentage of the wrapper, 11:42 we're essentially just narrowing the margins on the left and right side. 11:46 Again, as the screen gets narrower, screen real estate becomes more valuable 11:51 so we need to give up some of that white space on the left and right. 11:55 This will be an ongoing theme as the screen gets smaller 11:59 and we'll continue to adjust the size of our wrapper. 12:02 So let's go ahead and switch back to rwd.css, 12:05 and once again, we're going to set a strange body color 12:12 and we'll set this one to background: red;. 12:16 So we'll go ahead and switch back to Google Chrome 12:21 and refresh the page, and as you can see, our background color isn't being applied yet, 12:23 so that means that we're still at a wider screen resolution 12:29 than that media query's actually targeting. 12:32 So let's go ahead and reduce the size of our browser 12:35 and when we do, you'll see that it instantly pops to red. 12:38 Now, the thing that I'm noticing in this particular layout 12:44 is the phone is actually pushing this button down 12:47 and we don't want that, so let's go ahead and switch back to TextMate 12:50 and instead of floating the phone to the left, 12:56 let's just go ahead and float it to the right. 12:59 We'll just switch back to Google Chrome and refresh the page, 13:01 and there you can see our phone is now floated over to the right 13:06 and we've remedied that problem; the button looks good 13:10 and we can now see these features down here at the bottom. 13:13