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.

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

Pavel Makeev
Pavel Makeev
6,207 Points

Something wrong with my css

hey, guys. Here's my .js

// Create a select and append in to #menu

var $select = $("<select></select>"); $("#menu").append($select);

// Cycle over menu links $("#menu a").each(function(){ var $anchor = $(this); // create an option var $option = $("<option></option>"); // option's value is the href $option.val($anchor.attr("href")); // option's text is the text of link $option.text($anchor.text()); // append option to select

 $select.append($option);

}); //Create a button var $button = $("<button>Go</button>"); $("#menu").append($button); //Bind click to the button $button.click(function(){ //Go to selected location window.location = $select.val(); });

and here is a small piece of css that doesn't work:

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

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

the second media query seems to be wrong, it does not hide anything. Please, help me to find out where I made a mistake.

1 Answer

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,610 Points

Hi Pavel,

I think I've found your mistake. Here you are with your code:

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

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

I think you should try to remove the two semicolons you are using after the curly braces. Maybe you should try this one:

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

@media (min-width: 720px){ 
  #menu select, 
  #menu button { 
    display: none; 
  } 
}
Pavel Makeev
Pavel Makeev
6,207 Points

Unfortunately, tha doesn't work :(