Something wrong with my css

Question

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.

Answer 1 · 2017-04-28T07:19:31Z

April 28, 2017 7:19am

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; 
  } 
}

Welcome to the Treehouse Community

Looking to learn something new?

Pavel Makeev

Pavel Makeev

Something wrong with my css

1 Answer

Thomas Dimnet

Thomas Dimnet

Pavel Makeev

Pavel Makeev