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 jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

rui Paz
rui Paz
3,111 Points
Posted by rui Paz
rui Paz
3,111 Points

ul not disappearing with media queries

Hi guys, so basically as far as I understood the code all looks the same as Andrew's .

However Im stuck in the early part of the video, since when the media queries were applied the select and button did disappear and appear correctly but did not take place of ul when in reduced widths. 

@media (min-width: 320px) and (max-width: 568px){

#menu ul {
  display:none;
  }
}

@media (min-width: 568px) {
  #menu select, #menu button {
    display:none;
  }
}

8 Answers

David Laycock
David Laycock
2,988 Points
David Laycock
David Laycock
2,988 Points

I ran into this issue as well. It took me a little while but I eventually figured out that my commenting in the CSS file was the incorrect format using "// Comment here" instead of the CSS commenting of "/* Comment Here */".

Mohamed Nabih
Mohamed Nabih
11,416 Points
Mohamed Nabih
Mohamed Nabih
11,416 Points

thank you, this was my issue too :)

Tommy Duquette
Tommy Duquette
10,101 Points
Tommy Duquette
Tommy Duquette
10,101 Points

Ha, same here as well. Thanks, I was getting extremely annoyed :)

Michael Singleton
Michael Singleton
6,253 Points
Michael Singleton
Michael Singleton
6,253 Points

lower 320px to 180px

Stephen Ford
Stephen Ford
2,836 Points

That does it! Thanks Michael!

Volodymyr Boretskyi
Volodymyr Boretskyi
9,094 Points
Volodymyr Boretskyi
Volodymyr Boretskyi
9,094 Points

or Just set max width 568px instead of min 320 and max 568

Matthew Fenton
Matthew Fenton
6,331 Points
Matthew Fenton
Matthew Fenton
6,331 Points

that did not work on mine. my code looks exactly like Stephen's.

John Barhorst
John Barhorst
9,648 Points
John Barhorst
John Barhorst
9,648 Points

I had the exact same issue. Using Chrome on Windows 7. Michael's solution worked for me. Thanks!

Daniel Rotenberg
Daniel Rotenberg
8,646 Points
Daniel Rotenberg
Daniel Rotenberg
8,646 Points

Thanks David! The comments were the issue for me and now it works perfect.

Lawrence Schoch
Lawrence Schoch
8,174 Points
Lawrence Schoch
Lawrence Schoch
8,174 Points

I made the same commenting mistake. Thanks, David. Excellent problem solving.

Pramodini Kurnala
Pramodini Kurnala
4,875 Points
Pramodini Kurnala
Pramodini Kurnala
4,875 Points

I am also having the same issue currently. I placed the correct commets also. Neither of my media queries are working.