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 Practice CSS Media Queries!
You have completed Practice CSS Media Queries!
Preview
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