This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
As the final step in our Lake Tahoe website project, we'll need to add media query breakpoints to adjust the layout for mobile devices and narrow viewport sizes.
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
You need to sign up for Treehouse in order to download course files.
Sign up