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
Welcome back. How did you do? Let’s go over how I solved this challenge.
Resources
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
Welcome back.
0:01
How did you do?
0:02
Let's go over how I solved this challenge.
0:03
Our first task was to prevent the main and
0:06
footer elements from growing
too wide on a large screen.
0:09
You could involve a media query here,
but as the comments suggested,
0:13
it's not totally necessary.
0:17
I've used a comma to select both
the main and footer element.
0:22
I'll set a max-width of 1024 pixels,
0:26
though if you chose a different number,
that's perfectly fine.
0:29
And we'll set the margin to 0 auto,
that's no extra margin on the top or
0:35
bottom, and the auto value will center
both of these elements horizontally.
0:40
Now for the print media query, all we need
to get started is an @media declaration,
0:50
followed by the word print and
a set of curly braces.
0:56
For the navigation,
1:01
setting the nav element to display
none should be good enough to hide it.
1:02
As for the image, it's wrapped
inside an element called figure.
1:08
If you're unfamiliar
with the figure element,
1:13
I've included a reading in
the teachers notes, but
1:15
this is what allowed me to provide
a caption underneath the image.
1:18
So I'll float the figure element to
the left and set the width to 50%.
1:22
That's pretty good, but
when I press Cmd+P,
1:32
I noticed the text is allowed to
wrap awfully close to my image.
1:35
I'll include a bit of margin
on the right side of my image.
1:40
Finally, let's work on the media query for
large screens.
1:53
In this case, we'll write screen
after our @media declaration.
1:59
Followed by a min-width of 768 pixels.
2:05
So the upcoming set of rules won't
kick in unless our viewport is at
2:10
least 768 pixels wide.
2:14
For our figure element, I can solve it in
a similar way to my print media query.
2:19
When I test that in the browser,
however, I'm not loving
2:36
the fact that this heading reading stay
tuned wraps up next to my figure element.
2:39
I prefer it stayed underneath.
2:45
If you look at your HTML,
2:47
you'll see the h2 element we'd like
to target has a class called no-wrap.
2:49
So let's apply the clear
property to the no-wrap class.
2:55
Better, but that heading is still too
close to the bottom of the image for
3:08
my taste.
3:12
I'll adjust the margin on the figure
element using the shorthand.
3:14
That's no margin on the top,
one rem on the right,
3:20
two rem on the bottom,
and none on the left.
3:24
You were also asked to display
the navigation horizontally rather than
3:33
vertically on large screens.
3:37
This one takes a bit
of creative thinking, and
3:39
there's a number of different
ways we could approach it.
3:41
Since my nav li items are set
to display block by default,
3:44
I'm going to try switching their
display value to inline-block.
3:48
That works but now the list
items are touching each other.
4:00
To spread them out,
4:04
I'm going to include a bit of margin
on the left side of each one.
4:05
Okay, now the links are spread out,
which looks better.
4:13
The only problem is the navigation
is now a bit off-center.
4:17
This might not be that easy to spot,
but if I inspect my list items,
4:21
I can see the first element has
an unnecessary space on the left side.
4:26
We can erase that space by using
the first child pseudo class.
4:32
Great, that looks good to me.
4:52
I hope you enjoyed this opportunity to
practice writing CSS media queries.
4:54
You might even continue this exercise to
include more changes at different viewport
4:59
widths.
5:04
And remember, if your solutions look
different than mine, that's totally okay.
5:05
Keep on practicing, and
I'll see you next time.
5:10
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