Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Donald Richmond
13,807 PointsHow do you set the media type to screen???
In a media query, how do you set the media type to screen and the orientation to landscape??
<!DOCTYPE html>
<html>
<head>
<title>Sass Basics - Code Challenge</title>
<link rel="stylesheet" type="text/css" href="page-style.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<h1>Hampton's Blog</h1>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Hampton</a></li>
<li><a href="#">Hampton's Work</a></li>
</ul>
<img src="me2.jpeg" alt="">
<div class="entry">
<h1>Delicious Food in SF</h1>
<div class="content">
<p>
You know what my favorite restaurant in San Francisco is? The answer is that there are so many great restaurants that I couldn't choose one. But honorable mentions include Mr. Chow's, Live Sushi and Piccino.
<a href="/info.html">Read More</a>
</p>
</div>
</div>
<div class="entry">
<h1>Great Music</h1>
<div class="content">
<p>
Here are some of my favorite bands from years past and present: Belle and Sebastian, Pixies, and Daft Punk. Listening to music allows me to focus when I'm programming.
<a href="/info.html">Read More</a>
</p>
</div>
</div>
</div>
</body>
</html>
/* Write your SCSS code below. */
@media (screen: landscape) {img {width: 360px; } }
3 Answers
Robert Richey
Courses Plus Student 16,352 PointsHi Donald,
That's a good attempt. One way to think about media queries is as you would read an if conditional.
if the media has a screen type and the orientation is landscape, then set width of img elements to 360px.
The screen acts as a boolean value - it's either true or false. Also, we want the expression orientation: landscape to be true. All together, it looks like this:
@media screen and (orientation: landscape) {
img { width: 360px; }
}
Check out MDN's awesome article on media queries for more in-depth information.
Cheers!
Donald Richmond
13,807 PointsRobert, Thanks for the answer on the last one. It proved correct. Do you understand this one?
Open a scope on an <ul> with the ID menu. Inside that, open a scope on a <li> element. Using Sass nesting, add a media query so that the <li> elements will have an attribute of text-align: center when the media is screen and the max-width is 500px.
Robert Richey
Courses Plus Student 16,352 PointsThe question is confusing to me, but here is what I'm able to put together.
/**
* the #menu element's text will be center aligned when the screen is 500px or less
*/
#menu {
@media screen and (max-width: 500px) {
text-align: center;
}
}
Donald Richmond
13,807 PointsRobert, thanks for the second answer. They both worked. I fail to remember, though, where they covered these topics!!
Robert Richey
Courses Plus Student 16,352 PointsIn the video just prior to these challenges, Hampton covers Working with Media Queries. The only thing I didn't notice him using was the screen media feature.
Sass is a more advanced topic, so it's probably understood that we already know how to write a media query. The advantage with Sass - and part of what makes it slightly more advanced - is our ability to nest those media queries inside other style rules.
Here is great video from Guil called Media Features and Media Types in the course CSS - Beyond the Basics.
Robert Richey
Courses Plus Student 16,352 PointsHere is another good video on media queries from Nick - Adding Breakpoints for Devices in the How to Make a Website course.