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

Posted by Sam Hainsworth
Sam Hainsworth
4,200 Points

Sass @media help D:

so I’m stuck on this

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 <li> elements will have an attribute of text-align: center when the media is "screen" and has a max-width of 500px.

I thought it was pretty clear, but after being on this now for 20 minutes I’ve given in so any help?

This is what I’ve got and I thought it was right.

@media screen and (orientation: landscape) {
    img {
    width: 360px;
  }
}

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

Any help would be great!!! :D

10 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

"a ul with the ID menu"

Not a ul inside something with an id of menu!

Alex Oragwu
Alex Oragwu
5,396 Points
Alex Oragwu
Alex Oragwu
5,396 Points

This is how I got through:

#menu {  //this selects the unordered list with the ID menu (remember IDs are //unique) so that's all you need to specify

    @media screen and (max-width: 500px) { // specify the media query

          li { // select the list item that it should apply to
                 text-align: center;
    }
  }
}

The comments from cucbe1004 and Tom Bedford helped me understand it. I hope this helps.

Ashkan Neshagaran
Ashkan Neshagaran
29,205 Points
Ashkan Neshagaran
Ashkan Neshagaran
29,205 Points 
ul#menu {
    li {
      @media screen and (max-width: 500px) {
        text-align: center;
      }
    }
}

This is how I passed. Hope this helps

Adam Debbagh
Adam Debbagh
31,216 Points
Adam Debbagh
Adam Debbagh
31,216 Points

hint : ul#menu { li{ } }

Ashkan Neshagaran
Ashkan Neshagaran
29,205 Points
Ashkan Neshagaran
Ashkan Neshagaran
29,205 Points 
ul#menu {
    li {
      @media screen and (max-width: 500px) {
        text-align: center;
      }
    }
}

This is how I passed. Hope this helps

Matthew Clark
Matthew Clark
7,255 Points
Matthew Clark
Matthew Clark
7,255 Points

why do you do ul#menu?

Diego Lucero
Diego Lucero
10,588 Points
Diego Lucero
Diego Lucero
10,588 Points

Could this possibly be the reason why this question was so confusing?

Sass Screencap

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 be depend on an elements (in this case, li's) width.

S Alexander
S Alexander
18,962 Points
S Alexander
S Alexander
18,962 Points

Agreed. Grammatical unclarity is the problem.

Dinakaran K
Dinakaran K
8,613 Points
Dinakaran K
Dinakaran K
8,613 Points

It is ul with the id menu.. See the words. ul having an id called menu so we have to use #menu only no #menu ul. Inside that we put the media quries and select the li and write the text-align:center..

Sam Hainsworth
Sam Hainsworth
4,200 Points
Sam Hainsworth
Sam Hainsworth
4,200 Points

as well the hint i get is "-webkit-auto”? I have no clue what this is at all!

Sam Hainsworth
Sam Hainsworth
4,200 Points
Sam Hainsworth
Sam Hainsworth
4,200 Points

Ok so I got past this but by removing #menu, that can not be right after it told me to put it surely?

Isaac Kingsley Abban Kwofie
Isaac Kingsley Abban Kwofie
8,492 Points
Isaac Kingsley Abban Kwofie
Isaac Kingsley Abban Kwofie
8,492 Points

check this out

menu {

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

Diego Lucero
Diego Lucero
10,588 Points

Isaac Kingsley Abban Kwofie , it looks like you are missing a left curly brace in your code! It should read:

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

..with a left curly brace before the "text-align: center;"