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

Corwyn Wilkey
Corwyn Wilkey
7,971 Points
Posted by Corwyn Wilkey
Corwyn Wilkey
7,971 Points

Sass nesting media queries code challenge...

Currently working on Sass nested media query code challenge. The challenge reads as follows...

••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.••

my code looks like this...

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

I can't figure out what I'm doing wrong. It keeps telling me that I should specify '(max-width: 500px)'. Haven't I done that already?

I know Sass is supposed to make this easier, and I understand the basic concepts involved, but I find the concept of nesting to be extremely confusing. I also happen to be dyslexic however, so perhaps I just have some characters mixed up than I can't see?

Corwyn Wilkey
Corwyn Wilkey
7,971 Points
Corwyn Wilkey
Corwyn Wilkey
7,971 Points

Never mind. I figured it out. The wording is very miss-leading. When I left out the ul instead using #menu li it worked just fine.

3 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Corwyn,

Your nesting actually looks great, the issue is in your #menu selector. They're looking for a ul with the ID of menu so that's ul#menu. "Open a scope on an <ul> with the ID menu. Inside that, open a scope on a <li> element."

ul#menu {
  @media screen and (max-width:500px) {
        text-align: center;
  }
}
Damian Borowski
Damian Borowski
7,839 Points

When I tried your advice it didn't work.

I think that @media also need to include definition for li tag. So: li { text-align: center; }

Then it worked.

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Damian, it's been awhile since I've looked at this, but reviewing the challenge again, yes including the li within the scope of the nested selector is what they're asking for. Not sure where the state of this question might have been 6 months ago that would have caused the direction of my original answer.

ul#menu {
  li {
    @media screen and (max-width: 500px) {
      text-align: center;
    }
  }
}
Nick Kohrn
Nick Kohrn
36,936 Points
Nick Kohrn
Nick Kohrn
36,936 Points

corrected my answer

I agree with Tim, Corwyn.

Corwyn Wilkey
Corwyn Wilkey
7,971 Points
Corwyn Wilkey
Corwyn Wilkey
7,971 Points

Thanks for the quick response gentlemen! I was able to find a solution.

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

No problem Corwyn. Glad you could get through it. As you mentioned using just #menu works because it's targeting any element with #menu so it's somewhat synonymous with ul#menu.