Preview
Video Player
00:00
00:00
Improving Spacing
3:52Before we write any CSS media queries for our Lake Tahoe site, let’s look at our mobile layout carefully and see whether any improvements need to be made.
Before we write any CSS media queries for
our Lake Tahoe site, let's look at
0:01
our mobile layout carefully and see
whether any improvements need to be made.
0:06
Scrolling through our layout,
0:12
my only real concern on the mobile
screen is vertical spacing.
0:14
It should be extremely obvious when
the user glances at our page, where one
0:19
bit of content ends, and another begins
and which parts of the page are related.
0:24
For example, the button labeled "See
the Wildlife" is currently spaced
0:31
equally between the image of the bear and
the image of the forest.
0:36
While the user could read the text and
0:41
figure out that the text relates
to the wildlife section above,
0:44
there's no reason to increase
the user's cognitive load, or
0:48
the amount they have to figure
out to navigate this webpage.
0:52
Let's improve the vertical
spacing instead.
0:57
Since our three main sections of
content found between the header and
1:01
footer are found inside
the section element,
1:06
increasing the space underneath
each section should be a big help.
1:09
The sections are surrounded by
the main element, so I'll write
1:15
this CSS right underneath
our main type selector.
1:20
This increased padding plus a subtle
border dividing each section, will
1:43
make the page markedly easier to scan over
with your eye to find key information.
1:48
I might similarly want to increase
the space between the two divs
1:57
with a class of .column.
2:01
If I want to increase the spacing
underneath the first div, but
2:04
not the second,
2:08
the first child pseudo selector will allow
me to select only the first element.
2:09
Once we feel confident that
our mobile layout is solid,
2:32
it's time to expand the viewport.
2:36
And determine where improvements
are needed to the large screen version.
2:39
The most immediate problem I see is our
content is allowed to grow too wide.
2:45
The header image looks
pretty cool full screen.
2:52
And the header and footer contain
only a bit of centered text.
2:56
So I'm not so
worried about those areas of our layout.
3:00
But as the viewpoint gets wider,
the images start to become pixellated and
3:04
our columns of text grow too wide for
comfortable reading.
3:10
We can actually solve this
one without a media query by
3:17
applying the max-width
property to our main element.
3:22
Now, our main content is prevented from
growing any wider than 1000 pixels.
3:34
And we've used auto margins to center
the main element on a larger screen.
3:40