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
Diego Lucero
10,588 PointsAdvanced Sass Concepts Quiz: Is this an error?
As I did this quiz, I became confused about the way the second question was worded. See below for a screencap, and just below that I included what I think confused me.
At the end of the statement it reads, "Give the attribute of text-align: center when the media is screen and the <li> has a max-width of 500px"
I had no idea that media queries could watch an elements (in this case, li's) width.
Am I wrong? I'm still new to media queries in general, so all of this is still pretty fresh to me.
4 Answers
Adam Sackfield
Courses Plus Student 19,663 PointsHey Buddy here is the solution
ul#menu {
li {
@media screen and (max-width:500px){
text-align: center;
}
}
}
To clarify in plain old CSS media queries would come at the bottom of the stylesheet, whereas in SASS they can be nested inside the main rules. Every element can have a media query act on its rules, in SASS it just looks a lot more readable and flows better to have them nested like above.
So first it is the element selector, then the media query then the rule(s).
Hope this clarifies it. If not contact me and ask away what you need to :)
James Barnett
39,199 PointsI agree with Adam Sackfield's reading of the question
> when the screen's width is at maximum 500px then the targeted "li" will have it's text centered.
I think that question is poorly worded, tagging Guil Hernandez and Hampton Catlin on this one.
James Barnett
39,199 PointsAlso if you are ever curious what exactly CSS is being output by a bit of Sass you can always throw it in SassMeister.
Diego Lucero
10,588 PointsAwesome, thanks for the resource James.
Adam Sackfield
Courses Plus Student 19,663 Points+1 for the link James Barnett. PS. I was just offered a moderator role so will need to keep track of all these resources :)
Diego Lucero
10,588 PointsNice! Congrats Adam!
Adam Sackfield
Courses Plus Student 19,663 PointsThanks :)
Diego Lucero
10,588 PointsI passed the quiz already. I am pointing out that the statement in the question is confusing. Please re read the post.
Diego Lucero
10,588 PointsOh hey Adam! I didn't realize it was you!
Sorry about the short response. I was really talking about the question itself, as opposed to looking for the answer. I'm pretty sure that the media queries do not watch for the width of the li element in any capacity.
I was hoping that if it were a typo error (because I believe it is), and since it is a tad confusing, that maybe it could be fixed for future users.
Adam Sackfield
Courses Plus Student 19,663 PointsYeah I think it's the wording, as its not watching for the width of the "li" it's when the screen's width is at maximum 500px then the targeted "li" will have text-centre. Not the actual "li" size.
Diego Lucero
10,588 PointsThanks Adam. That means I'm not going crazy ha
Let me call in one of the moderators: James Barnett