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

CSS Sass Basics (retired) Advanced Sass Concepts Working with Media Queries

Posted by Harrison Moreau
Harrison Moreau
8,907 Points

Help!! Sass working with media queries Challenge task 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.

Im attempting to code this and I get to before im stuck :

ul #menu { li { text-align: center }}

Ive tried placing the @media screen and (max-width: 500px) everywhere but cant seem to pass! can anyone help me?

Kaleem Corbin
Kaleem Corbin
9,432 Points
Kaleem Corbin
Kaleem Corbin
9,432 Points

I ran into the same error, there is no space between ul & #menu; your code should read as ul#menu { ...}

1 Answer

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You need to nest the media query in with the li you are selecting like below

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

With sass you can add the media queries inside the normal rules so it flows better to the reader