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
Leon Kenedy
Courses Plus Student 9,149 PointsCould you please help me with this code challenge?
I really need help with Media Queries using Sass. I need help on the very first one. I have no code due to I don't even know where to start.
http://teamtreehouse.com/library/sass-basics/advanced-sass-concepts/working-with-media-queries-2
3 Answers
Salman Akram
Courses Plus Student 40,065 PointsHi Leon,
You have to use @media directive to set all image tags at 360px.
Write codes in Style.SCSS tab, not HTML
@media screen and (orientation:landscape) {
img {
width: 360px;
}
}
Salman Akram
Courses Plus Student 40,065 PointsLet me see Part 2 - "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."
We look at HTML example, talk about ul with ID (#menu) and then li. Then add similar media codes to set 500px max-width + Center text align. Just like we did similar in part 1.
<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>
Something like this below.
/* Write your SCSS code below. */
@media screen and (orientation:landscape) {
img {
width: 360px;
}
}
ul#menu {
li {
@media screen and (max-width: 500px) {
text-align: center;
}
}
}
Leon Kenedy I would be greatly appreciated if you please mark best answer that is solved challenge puzzles. :D
Sharon Smith
8,747 PointsTHANK YOU!!! I've been trying to figure out Pt. 2 for hours!!! I had the right idea but the wrong order on the ul vs. #media. Was that something he covered back in nesting, maybe? (I only just thought of that right now)
I have this feeling that I would love Sass if I could just the hang of it but this course just doesn't seem to be clicking with me for some reason. But then, sometimes it seems like what's in the code challenges isn't what was covered in the video. Like how to add orientation to a media query, for example. I had the idea but didn't know the precise code until I checked out the Sass-Lang site site. That was after I'd checked through all three of the Sass books I have- which includes Hamilton's own book, Pragmatic Guide to Sass. Every single one talked about max-width like he did in the video which I knew wouldn't work. Sometimes Hamilton reminds me of some of my old profs- extremely knowledgeable about his subject (& certainly very engaging) but not always the best at breaking things down to a beginner's level. On the other hand, I'm a design person & don't think like an engineer at all, so it might be a translation issue. (At an old job of mine, we used to joke that "Engineer" was an entirely different language from normal English.) :-D
Salman Akram
Courses Plus Student 40,065 PointsCan you post questions in part 2 here, I can't go all over part 1 question again.
Leon Kenedy
Courses Plus Student 9,149 PointsLeon Kenedy
Courses Plus Student 9,149 PointsThank you so much. How would I solve part two?
Leon Kenedy
Courses Plus Student 9,149 PointsLeon Kenedy
Courses Plus Student 9,149 PointsCan you help me with part two to this code challenge? http://teamtreehouse.com/library/interpolating-and-ifelse