Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Brent Sullivan
9,877 PointsDebugging media queries in using Chrome Dev Tools
I copied Andrew's media query code char-for-char but when I resize my browser the #menu ul does not disappear. Ugliness ensues.
The other media query, which hides the dropdown menu and GO button works fine.
Any ideas?
Also, is there a good way to debug media queries in Chrome?
Thanks!
@media (min-width: 320px) and (max-width: 568px) { #menu ul { display:none; } }
@media (min-width: 568px) { #menu select, #menu button { display:none; } }
2 Answers
Chris Shaw
26,662 PointsHi Brent,
Your current CSS shows display: none which will always hide the ul element on smaller resolutions, simply change that to display: block and you should be in business.
Brent Sullivan
9,877 PointsSorry...I should have explained a little better.
The ul should disappear when the browser gets small, but this does not happen. The ul sticks around and starts bunching up as I make the browser smaller. I want it to go away.
Chris Shaw
26,662 PointsYour media query is telling the browser to only hide the menu once you're on a mobile device, if you need it to be hidden earlier simply change max-width: 568px to something higher until you get the desired result.
To explain a little better max-width defines the total maximum browser width that the media query is allowed to trigger at.