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

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

Andrea Miotto
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrea Miotto
iOS Development Techdegree Graduate 23,357 Points
Posted by Andrea Miotto
.a{fill-rule:evenodd;}techdegree seal-36
Andrea Miotto
iOS Development Techdegree Graduate 23,357 Points

At 568 px width you won't display anything

@media(min-width: 320px) and (max-width: 568px) {
  #menu ul {
    display: none;
  }
}

/* Also hides button and select on larger width and shows link: */
@media(min-width: 568px) {
  #menu select, #menu button {
    display: none;
  }
}

The second media query should be:

/* Also hides button and select on larger width and shows link: */
@media(min-width: 569px) {
  #menu select, #menu button {
    display: none;
  }
}

otherwise at 568 px width you won't display any menu.

3 Answers

Mark Houston
Mark Houston
11,782 Points
Mark Houston
Mark Houston
11,782 Points

I came across the same thing Andrea. You are correct the second query needs to by 569px.

Ivo Vieira
Ivo Vieira
5,443 Points
Ivo Vieira
Ivo Vieira
5,443 Points

Yup, that was the thing that couldn't leave my mind when I was noticing the teacher writing the contradictory info around the 568px. Nice that other people are also noticing these details! Thank you for your post and other people who commented!