So the last thing we need to do in our Lake Tahoe website is add a couple of

media query breakpoints to adjust our layout for

smaller devices and viewport sizes.

Because currently parts of our layout are breaking at certain points.

So I'm going to go back to our style sheet and select and

delete these example media queries to show you what I mean.

Now if you want you can simply comment them out if you want to use

them as reference for later.

So when we save our style sheet and go back to the browser.

And let's resize the browser viewport.

So when the width gets down to about 600 pixels or

lower we start seeing a lot of issues in our layout.

The content starts to get very narrow and cramped.

And it gets to a point where the content is barely readable.

So as you can see in some areas the text in columns are too narrow, or

the line height and font sizes are too big,

and we're seeing that appear in the header area.

So we can adjust this with media queries.

So the first thing we wanna do is create a new media query that checks when

the device or browser viewport is 1024 pixels or lower.

So let's create a new media query by typing @media and

this time we're gonna use the max-width media feature.

And we're gonna set the value to 1024 pixels.

So now let's target the primary and

secondary content divs and make them a little wider at 1024 pixels.

Because currently the 75% width seems a little too narrow.

So were gonna target the primary content class and the secondary content class.

Then were

going to add a width property and let's set the value to 90%.

So let's save our style sheet, go back to the browser and refresh.

And let's resize the viewport.

So once the view port is at 1024 pixels or narrower,

the primary secondary content divs expand to 90% of the browser width.

I think that looks much better.

So now we wanna expand the content even further when the viewport is

at about 768 pixels.

And we'll wanna adjust other areas, like the main header's text and

its height, and we'll also want to fix this issue down here in our column width.

So let's go back to our style sheet,

and we're going to create one more media query.

And once again, we're going to use the max-width media feature.

But this time, we're going to apply these new styles when the device or

browser's viewport is at 768 pixels or narrower.

So what I'll do is copy this primary secondary content rule from our

first media query.

And I'm just gonna paste it down here in our new media query.

And let's change the width value from 90% to 100%.

And let's also add a padding property.

And let's make the padding 20 pixels.

And let's also remove this top borders in the primary, secondary content divs.

So let's add a border property.

And we're going to set the value to none.

All right.

So let's save our style sheet.

Go back and refresh the browser.

So, now when we resize the browser down to 768 pixels or lower,

the main content areas are no longer too narrow for optimal readability.

And now, those top borders are also gone.

So next let's adjust our header height, because currently the 850 pixel

height seems a little too tall for smaller screens.

So back in our style sheet in the second media query right below the primary and

secondary content rule.

Let's target our main header with the main header class.

[BLANK_AUDIO]

And let's give it a max-height property.

And we're gonna wanna set the max-height to 380 pixels.

Let's also adjust the padding,

cuz currently the top padding of 170 pixels is a little too much, so.

Let's add a padding property, and let's change the top padding to 50 pixels,

the left and right paddings to 25 pixels and the bottom padding to zero.

Right below the main header rule,

let's target the title element with the title class.

[SOUND] And let's change the title's font size with a font size property,

and we're gonna take the font size down to 1.3rem.

And we're also gonna remove that bottom white border.

So let's set a border style and set it to none.

[SOUND] So next right below the title rule.

Let's target the h1 heading with the h1 selector and

let's take the font size down to 5rem.

And let's also change the line height,

let's make it a little smaller by changing it to 1.1.

And now that the header will be much shorter,

let's also hide this arrow image in our main header.

So we'll go back to our media query, and right beneath the h1 rule,

let's target the class arrow.

And to hide it, we're gonna set its display value to none.

All right, so let's save our style sheet.

And when we refresh the browser and resize it down to 768 pixels,

notice how the header height looks much better at 380 pixels.

And the title and

main heading are also looking pretty good in this narrow viewport range.

Cool.

So the next thing we'll do is adjust this intro paragraph's text size

back to the root font size of 16 pixels.

Because currently, the text seems a little too big for smaller screens.

So to adjust the text size, we'll go back to our second media query.

And we'll target the class intro,

then we're going to define a font size property.

And to set the font size back to that root font size of 16 pixels, remember,

we can use the rem unit so let's set the value back to 1rem.

So when we save and take a look at it again.

Let's refresh the viewport.

And that looks much better.

[SOUND] So if we scroll down to the wildlife container and

resize the browser, notice how there appears to

be a little too much padding applied to the div.

So let's actually go back to our first media query to

adjust the padding value for this wildlife div.

So back in our style sheet let's scroll up to the very first media query here and

right below the primary and

secondary content rule let's target the class wildlife.

And apply a padding property.

And let's change the value to 10% for the top and

bottom padding and 12% for the left and right padding.

Let's also adjust the margins.

So we're gonna add a margin property.

And we're gonna set the top margin to 50 pixels.

The left and right margins to zero and the bottom margin to 20 pixels, all right?

So let's refresh and take a look.

So when we resize the browser, down to about 768 pixels or

lower, we can see that this looks a lot better.

The content and the div no longer looks too narrow or cramped and

the new margin values closed up some of that extra space around the div.

[BLANK_AUDIO]

So next we'll need to make some adjustments to our column layout notice

how their a little too narrow and cramped in this narrow viewport.

So let's go back to our second media query and

we're going to target the resorts and tips columns.

So, below the intro rule, let's target the class resorts and the class tips.

And instead of floating the two columns in the narrow viewports, or

smaller screens, we're gonna remove the floats by adding a float property and

setting the value to none.

Then we're gonna set their widths to 100%.

All right, so if we save our style sheet, then go back and

refresh and take a look at it again, let's resize the browser, and

we can see that the content in our columns looks great.

The text is now readable and the images are also looking good.

So while we are at it, let's also reduce some of the top and

bottom padding down here in our footer.

So, once again, let's go back to the second media query and

let's target the main footer class.

And let's add a padding property.

And in this media query, we're gonna set the top and

bottom padding to 20 pixels, and the left and right padding to 0.

So now when we go back and take a look at it again, now the footer

doesn't seem too tall and out of place on the smaller screens and viewport sizes.

But let's go ahead and

bring back that top border, and our footer, because I kinda like that.

So, let's go back to our media query and let's scroll up, and

right here in the primary,

secondary content rule, instead of border none let's just say border top none.

So, let's save and refresh.

And as we can see, cool, the border style's still there,

right above the footer, so

it gives it a little separation between the content and the footer.

Okay, so that about does it for

the media query breakpoint adjustments in our layout.

So finally the latest version of the Chrome Developer Tools has a new device

simulation feature that let's us preview and test our layout on different devices.

So if we click this phone icon right here next to the inspect icon,

this brings up the simulator.

Now if we select a device up top, so let's say the iPhone 6.

Notice how the media queries have not taken effect yet.

So it's displaying the normal layout.

Not the one optimized for smaller screens.

So our layout look likes it would look on a desktop browser, but much smaller.

Which makes it difficult to see the content on the page.

Well, this is happening because modern devices, like the iPhone for

example, use a virtual viewport that zooms out as much as it can so

that the entire layout fits on a screen.

So to optimize our layout for

mobile devices, we'll need to add a special HTML meta tag that instructs to

device how to handle the viewport size on mobile devices.

So, in our HTML file, let's go to the head section.

And right below the link tag, let's add a meta tag,

and the first thing we're gonna do is add a name attribute.

And let's set the value to viewport, and

right after that let's add a content attribute.

And for this value we're going to type width equals device-width.

So in this content value here the width property is

what controls the size of the device viewport.

And with the value device-width the device's browser will zoom in

to fit the screen as much as it needs to, according to the device's width.

All right, so let's save our index.html file.

And let's go back to the browser preview and refresh the page.

So when we go back and take a look at our layout in the device, great.

The layout now looks exactly how we need it to look on mobile devices.

The viewport is zoomed in.

And the layout displayed is the one optimized for smaller screen sizes.

So now we can select any of these devices and

our layout should look great in all of them.

So for example, here's the iPhone 5.

Let's scroll down to the Galaxy Note.

And everything's looking pretty good.

All right, so it looks like we're almost done here.

[BLANK_AUDIO]