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
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,676 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,676 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.