Adjusting the Layout with Media Queries

So the last thing we need to do in our Lake Tahoe website is add a couple of 0:00 media query breakpoints to adjust our layout for 0:04 smaller devices and viewport sizes. 0:06 Because currently parts of our layout are breaking at certain points. 0:09 So I'm going to go back to our style sheet and select and 0:13 delete these example media queries to show you what I mean. 0:16 Now if you want you can simply comment them out if you want to use 0:19 them as reference for later. 0:22 So when we save our style sheet and go back to the browser. 0:24 And let's resize the browser viewport. 0:28 So when the width gets down to about 600 pixels or 0:30 lower we start seeing a lot of issues in our layout. 0:35 The content starts to get very narrow and cramped. 0:38 And it gets to a point where the content is barely readable. 0:42 So as you can see in some areas the text in columns are too narrow, or 0:45 the line height and font sizes are too big, 0:49 and we're seeing that appear in the header area. 0:54 So we can adjust this with media queries. 0:57 So the first thing we wanna do is create a new media query that checks when 1:02 the device or browser viewport is 1024 pixels or lower. 1:06 So let's create a new media query by typing @media and 1:11 this time we're gonna use the max-width media feature. 1:17 And we're gonna set the value to 1024 pixels. 1:23 So now let's target the primary and 1:29 secondary content divs and make them a little wider at 1024 pixels. 1:31 Because currently the 75% width seems a little too narrow. 1:36 So were gonna target the primary content class and the secondary content class. 1:40 Then were 1:48 going to add a width property and let's set the value to 90%. 1:55 So let's save our style sheet, go back to the browser and refresh. 2:01 And let's resize the viewport. 2:07 So once the view port is at 1024 pixels or narrower, 2:10 the primary secondary content divs expand to 90% of the browser width. 2:14 I think that looks much better. 2:19 So now we wanna expand the content even further when the viewport is 2:23 at about 768 pixels. 2:29 And we'll wanna adjust other areas, like the main header's text and 2:31 its height, and we'll also want to fix this issue down here in our column width. 2:35 So let's go back to our style sheet, 2:43 and we're going to create one more media query. 2:45 And once again, we're going to use the max-width media feature. 2:51 But this time, we're going to apply these new styles when the device or 2:55 browser's viewport is at 768 pixels or narrower. 2:59 So what I'll do is copy this primary secondary content rule from our 3:06 first media query. 3:10 And I'm just gonna paste it down here in our new media query. 3:11 And let's change the width value from 90% to 100%. 3:15 And let's also add a padding property. 3:20 And let's make the padding 20 pixels. 3:25 And let's also remove this top borders in the primary, secondary content divs. 3:29 So let's add a border property. 3:33 And we're going to set the value to none. 3:36 All right. 3:37 So let's save our style sheet. 3:39 Go back and refresh the browser. 3:40 So, now when we resize the browser down to 768 pixels or lower, 3:43 the main content areas are no longer too narrow for optimal readability. 3:49 And now, those top borders are also gone. 3:54 So next let's adjust our header height, because currently the 850 pixel 3:59 height seems a little too tall for smaller screens. 4:04 So back in our style sheet in the second media query right below the primary and 4:10 secondary content rule. 4:16 Let's target our main header with the main header class. 4:18 [BLANK_AUDIO] 4:21 And let's give it a max-height property. 4:26 And we're gonna wanna set the max-height to 380 pixels. 4:30 Let's also adjust the padding, 4:35 cuz currently the top padding of 170 pixels is a little too much, so. 4:37 Let's add a padding property, and let's change the top padding to 50 pixels, 4:42 the left and right paddings to 25 pixels and the bottom padding to zero. 4:47 Right below the main header rule, 4:53 let's target the title element with the title class. 4:55 [SOUND] And let's change the title's font size with a font size property, 4:59 and we're gonna take the font size down to 1.3rem. 5:05 And we're also gonna remove that bottom white border. 5:10 So let's set a border style and set it to none. 5:13 [SOUND] So next right below the title rule. 5:16 Let's target the h1 heading with the h1 selector and 5:25 let's take the font size down to 5rem. 5:31 And let's also change the line height, 5:36 let's make it a little smaller by changing it to 1.1. 5:38 And now that the header will be much shorter, 5:42 let's also hide this arrow image in our main header. 5:45 So we'll go back to our media query, and right beneath the h1 rule, 5:48 let's target the class arrow. 5:53 And to hide it, we're gonna set its display value to none. 5:56 All right, so let's save our style sheet. 6:02 And when we refresh the browser and resize it down to 768 pixels, 6:03 notice how the header height looks much better at 380 pixels. 6:10 And the title and 6:14 main heading are also looking pretty good in this narrow viewport range. 6:15 Cool. 6:20 So the next thing we'll do is adjust this intro paragraph's text size 6:21 back to the root font size of 16 pixels. 6:27 Because currently, the text seems a little too big for smaller screens. 6:30 So to adjust the text size, we'll go back to our second media query. 6:40 And we'll target the class intro, 6:45 then we're going to define a font size property. 6:48 And to set the font size back to that root font size of 16 pixels, remember, 6:52 we can use the rem unit so let's set the value back to 1rem. 6:56 So when we save and take a look at it again. 7:01 Let's refresh the viewport. 7:04 And that looks much better. 7:06 [SOUND] So if we scroll down to the wildlife container and 7:08 resize the browser, notice how there appears to 7:14 be a little too much padding applied to the div. 7:19 So let's actually go back to our first media query to 7:25 adjust the padding value for this wildlife div. 7:28 So back in our style sheet let's scroll up to the very first media query here and 7:30 right below the primary and 7:36 secondary content rule let's target the class wildlife. 7:38 And apply a padding property. 7:46 And let's change the value to 10% for the top and 7:47 bottom padding and 12% for the left and right padding. 7:51 Let's also adjust the margins. 7:54 So we're gonna add a margin property. 7:56 And we're gonna set the top margin to 50 pixels. 7:58 The left and right margins to zero and the bottom margin to 20 pixels, all right? 8:01 So let's refresh and take a look. 8:07 So when we resize the browser, down to about 768 pixels or 8:10 lower, we can see that this looks a lot better. 8:14 The content and the div no longer looks too narrow or cramped and 8:17 the new margin values closed up some of that extra space around the div. 8:21 [BLANK_AUDIO] 8:26 So next we'll need to make some adjustments to our column layout notice 8:30 how their a little too narrow and cramped in this narrow viewport. 8:35 So let's go back to our second media query and 8:40 we're going to target the resorts and tips columns. 8:44 So, below the intro rule, let's target the class resorts and the class tips. 8:48 And instead of floating the two columns in the narrow viewports, or 8:58 smaller screens, we're gonna remove the floats by adding a float property and 9:02 setting the value to none. 9:06 Then we're gonna set their widths to 100%. 9:09 All right, so if we save our style sheet, then go back and 9:11 refresh and take a look at it again, let's resize the browser, and 9:16 we can see that the content in our columns looks great. 9:22 The text is now readable and the images are also looking good. 9:25 So while we are at it, let's also reduce some of the top and 9:33 bottom padding down here in our footer. 9:37 So, once again, let's go back to the second media query and 9:42 let's target the main footer class. 9:47 And let's add a padding property. 9:54 And in this media query, we're gonna set the top and 9:56 bottom padding to 20 pixels, and the left and right padding to 0. 9:59 So now when we go back and take a look at it again, now the footer 10:02 doesn't seem too tall and out of place on the smaller screens and viewport sizes. 10:07 But let's go ahead and 10:12 bring back that top border, and our footer, because I kinda like that. 10:13 So, let's go back to our media query and let's scroll up, and 10:17 right here in the primary, 10:21 secondary content rule, instead of border none let's just say border top none. 10:23 So, let's save and refresh. 10:29 And as we can see, cool, the border style's still there, 10:32 right above the footer, so 10:36 it gives it a little separation between the content and the footer. 10:37 Okay, so that about does it for 10:43 the media query breakpoint adjustments in our layout. 10:44 So finally the latest version of the Chrome Developer Tools has a new device 10:47 simulation feature that let's us preview and test our layout on different devices. 10:53 So if we click this phone icon right here next to the inspect icon, 11:00 this brings up the simulator. 11:04 Now if we select a device up top, so let's say the iPhone 6. 11:06 Notice how the media queries have not taken effect yet. 11:12 So it's displaying the normal layout. 11:16 Not the one optimized for smaller screens. 11:19 So our layout look likes it would look on a desktop browser, but much smaller. 11:21 Which makes it difficult to see the content on the page. 11:25 Well, this is happening because modern devices, like the iPhone for 11:29 example, use a virtual viewport that zooms out as much as it can so 11:32 that the entire layout fits on a screen. 11:37 So to optimize our layout for 11:40 mobile devices, we'll need to add a special HTML meta tag that instructs to 11:42 device how to handle the viewport size on mobile devices. 11:47 So, in our HTML file, let's go to the head section. 11:51 And right below the link tag, let's add a meta tag, 11:54 and the first thing we're gonna do is add a name attribute. 12:00 And let's set the value to viewport, and 12:05 right after that let's add a content attribute. 12:08 And for this value we're going to type width equals device-width. 12:12 So in this content value here the width property is 12:20 what controls the size of the device viewport. 12:24 And with the value device-width the device's browser will zoom in 12:28 to fit the screen as much as it needs to, according to the device's width. 12:33 All right, so let's save our index.html file. 12:38 And let's go back to the browser preview and refresh the page. 12:41 So when we go back and take a look at our layout in the device, great. 12:45 The layout now looks exactly how we need it to look on mobile devices. 12:49 The viewport is zoomed in. 12:53 And the layout displayed is the one optimized for smaller screen sizes. 12:55 So now we can select any of these devices and 12:59 our layout should look great in all of them. 13:01 So for example, here's the iPhone 5. 13:03 Let's scroll down to the Galaxy Note. 13:05 And everything's looking pretty good. 13:10 All right, so it looks like we're almost done here. 13:12 [BLANK_AUDIO] 13:14