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
stevencooper
5,755 PointsA couple of Sass questions - what is 'scope' and doing media queries
I have these instructions for a challenge:
The directions for the first part, shown below, are: "Write a media directive for screen media with orientation landscape. Within the directive, set the width attribute for all image tags to 360px." I got that, finally, with help.
@media screen and (orientation:landscape) {
img {
width: 360px;
}
}
"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 li has a max-width of 500px."
I think it should be:
ul#menu {
li {
@media screen {
max-width: 500px;
text-align: center;
}
}
}
However, when I check the work, I get the response: "Bummer! You should specify '(max-width: 500px)'."
I've gone over my old CSS notes from last year, and don't find anything helpful to me in answering this challenge.
This may sound very basic, but wth is a 'scope'? I've never seen or heard of it in any of my previous lessons.
Anyway, I'm sunk without some help.
<!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 and (orientation:landscape) {
img {
width: 360px;
}
}
ul#menu {
li {
@media screen {
max-width: 500px;
text-align: center;
}
}
}
Colin Marshall
32,861 PointsFixed. You forgot to close your first block of code so that threw the rest of it off.
Colin Marshall
32,861 PointsOne more thing: If you want to use tags in a sentence, don't enclose them in less than/greater than signs or else they won't show up. Just write div, for example.
2 Answers
Colin Marshall
32,861 PointsYou are very close to having it correct. Your problem is that your max-width is inside of your media query.
The way you have it, it is like you are saying: "Make the ul#menu li items text-aligned center and have a max-width of 500px when viewed on a screen device."
What you want it to say is: "Make the ul#menu li items text-aligned center when viewed on a screen device AND the browser width is at most 500px."
Colin Marshall
32,861 PointsOk I can see why you are confused. The problem is written incorrectly. Your answer should have worked the way the problem was written.
It says: "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 li has a max-width of 500px."
It should say: "...and the browser has a max-width of 500px."
stevencooper
5,755 PointsThanks Colin,
I am still having difficulty understanding what the darn question is asking for. I've read your answer & comment, and am still having a difficult time. I've tried several different iterations of the syntax, trying to get it right, but no joy.
I've tried different placements for the max width and still haven't gotten it right. here are some of my tries:
ul#menu {
li {
max-width: 500px;
@media screen {
text-align: center;
}
}
}
and
ul#menu {
max-width: 500px;
li {
@media screen {
text-align: center;
}
}
}
and
ul#menu {
li {
@media screen and (browser max-width: 500px;)
text-align: center
}
}
None of the above is the answer the question wants. Where am i going wrong?
Colin Marshall
32,861 PointsYour last answer is almost correct. Remove the word "browser" and get rid of the semicolon after 500px.
stevencooper
5,755 PointsThanks again, Colin
Colin Marshall
32,861 PointsNo problem! Looks like they updated the question wording after I contacted support to notify them.
Eduardo Rubio
6,719 PointsThis is what worked for me. your code was almost correct. you needed one more semi after the word center and additional set of brackets.
ul#menu {
li {
@media screen and (max-width: 500px){
text-align: center;
}
}
}
stevencooper
5,755 Pointsstevencooper
5,755 PointsSorry for the HTML..i didn't include it but there it is anyway.
the code that i'm having problem is in the bottom box. I don't know why my questions are in boxes, since i did not do the ``` around them.
maybe a mod could clear this mess up for me? thanks!