Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Enhancing Design with CSS!
You have completed Enhancing Design with CSS!
Preview
In terms of what aspects of our layout we might improve using a media query, one thing we could do is make our header more visually impressive on a large screen, where we have space to do so.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
What aspects of our layout should
we improve using a media query?
0:00
One thing we could do
is make our header more
0:05
visually impressive on a large
screen where we have space to do so.
0:08
Underneath our comment
labeled Media Queries,
0:14
let's start with an at-rule to
apply CSS rules when the
0:19
viewport is at least 720 pixels wide.
0:24
Now, we'll double the vertical
padding of the header.
0:35
The padding on the top and
bottom of the header was set to 10vh or
0:39
10% of the height of the viewport.
0:43
Let's double this to 20vh on larger screens,
0:47
where we have room to make
the visual more impressive.
0:50
We'll also increase the font
size of the header and title.
1:05
The after pseudo-element will
help us target the arrow we
1:23
inserted after the heading.
1:28
We'll increase the spacing between
1:30
the header and the arrow just a bit.
1:37
When we preview, we can see that
changes that occur when we expand
1:47
the viewport to make it
wider than 720 pixels.
1:52
Finally, I'm still a bit concerned
about the width of my text
2:04
on a very large screen.
2:09
And I'd like to approach this
problem two different ways.
2:11
For the divs containing "From Tents
to Resorts", and "Pack Accordingly",
2:15
I'd like to turn these into
columns placed side-by-side.
2:22
We'll look at that in just a moment.
2:28
For my intro paragraph, I'm going to not
only increase the font size just a bit,
2:31
but also add 15% of horizontal
padding to match my wildlife div.
2:39
That's better.
3:10
Now for
the divs containing a class called .column.
3:13
We haven't learned the most
modern methods for
3:16
creating responsive layouts yet,
including Flexbox and CSS Grid.
3:20
You'll learn those in
future Treehouse courses.
3:26
But in the meantime, I can place the two
3:29
divs side-by-side on
a large screen by getting
3:34
a bit creative using
display: inline-block.
3:40
This change should, in theory,
place the two columns side-by-side.
3:53
But when we test in the browser,
we'll find it doesn't work.
3:59
The columns do occupy 50%
of the available width, but
4:04
they're still stacked vertically.
4:08
To learn about why this happens,
I've included an article in the teacher's
4:13
notes from CSS Tricks, called "Fighting
the Space Between Inline Block Elements".
4:18
The article notes that white spaces
in your HTML actually creates
4:24
a bit of white space in your layout,
4:29
even when developers would prefer
the two elements touch each other.
4:32
I'll demonstrate by editing my
HTML to remove the return between
4:37
the two column divs.
4:42
Now the two columns
are against each other.
4:52
We could also comment out that
space rather than deleting it.
4:55
Since this is a presentation issue
however, we should really look for
5:13
a CSS solution rather
than altering our HTML.
5:18
So let's undo that comment.
5:22
The CSS Tricks article also mentions
the issue can be solved by closing
5:27
up the extra space with four pixels
of negative margin on the right side.
5:32
Let's try that instead.
5:39
That's a better way to solve it.
5:51
The columns are touching each
other which isn't a great look.
5:53
But we can solve this by first reducing
5:57
the width from 50% to 48%.
6:02
Now let's add space in
between the two columns.
6:13
I'm thinking I might add 4% of margin
on the right side of the first column.
6:17
Hopefully you'll remember from
our last video how to target
6:22
only the first of the two column divs.
6:27
That's right.
6:31
We'll use the first -child pseudo selector
to select only the first element.
6:32
Not only did we set
the right margin to 4%, but
6:49
we cancelled out the 4rem of bottom
margin that we added in the last video,
6:52
since we no longer need to space
out the columns vertically.
6:57
Let's test that out in the browser.
7:03
And looks like it's problem solving time.
7:07
Let's use the browser's inspect
feature to check out the box model
7:12
of each of our column divs.
7:17
The second div still has four pixels
of negative margin, which is how
7:20
CSS Tricks taught us to close up the space
between our inline-block elements.
7:25
However, in the first div, we've changed
our margin to 4% of the available space.
7:33
The problem now is we've lost that
four pixels of negative margin,
7:40
we need to bring these two divs together.
7:44
But, how on earth can we subtract
4 pixels of right margin from 4%?
7:48
We can't use a fixed number
here as our column widths
7:55
vary based on the width of the viewport.
7:59
The answer is a really cool
CSS feature called calc(),
8:06
which allows you to perform
math on mismatched value units.
8:10
For example, if we wanted to
calculate the measurement of
8:16
50% of the width of a CSS box,
plus 50 more pixels,
8:21
we would write calc 50% + 50 pixels.
8:27
On a large monitor,
let's say 50% of our CSS box is
8:31
600 pixels, add 50 and we get 650 pixels.
8:36
And then again,
on a narrow viewport such as a mobile
8:40
screen 50% of our CSS box width
might only be 160 pixels.
8:46
Add 50 and our total is 210 pixels.
8:53
Either way,
CSS quickly does the math for us.
8:58
So let's try using calc to set
the right margin of our first column.
9:03
Notice my column div
currently measures 29 pixels.
9:16
Yours might vary based on
the width of your viewport.
9:20
And when I refresh, look at that,
two columns side by side.
9:24
And, my column div is now 4
pixels narrower or 25 pixels.
9:30
That number adjusts as we narrow or
widen our viewpoint.
9:35
And, that completes our layout
on a variety of screens.
9:43
I've included readings on calc
in the teacher's notes if
9:48
you're interested to learn more.
9:51
Again, we used display: inline-block
as a quick, short term solution
9:54
to a simple challenge like two side-by-side columns of text about Lake Tahoe.
10:00
But this method wasn't built for
complex responsive layouts.
10:06
You'll learn more modern
techniques in the future.
10:11
Nice work.
10:16
Not only can you now control your
CSS layout, and presentation, but
10:17
now you've learned quite a few techniques
to make your text more legible and
10:22
keep your visuals more appealing.
10:27
Keep practicing, keep those learning
resources handy, and keep on having fun.
10:30
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up