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!

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

General Discussion

Posted by Tyler Fleming
Tyler Fleming
3,389 Points

Advanced Sass Concepts: Working with Media Queries, Coding Challenge 2

Description of challenge is:

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.

What I have is:

ul #menu {
    li {
      @media screen and (max-width: 500px) {
        text-align: center;
      }
    }
}

However I receive an error "Bummer! Select 'li' tags within the 'ul' that has an ID of '#menu'. Set their text-align property to center." and I cannot seem to figure out what is wrong with my code.

2 Answers

Tyler Fleming
Tyler Fleming
3,389 Points
Tyler Fleming
Tyler Fleming
3,389 Points

Answered it moments after posting. It should be:

ul#menu {
    li {
      @media screen and (max-width: 500px) {
        text-align: center;
      }
    }
}
Peter Szerzo
Peter Szerzo
22,661 Points
Peter Szerzo
Peter Szerzo
22,661 Points

Try removing the space between ul and the id selector: ul#menu { li { [...]