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

Manish Giri
Manish Giri
16,266 Points
Posted by Manish Giri
Manish Giri
16,266 Points

Select Menu and Button still visible at screens wider than 568px

In the Perform: Part 3 video, Andrew uses CSS media queries to modify the visibility of the select menu and button at certain screen sizes. Why doesn't the same code work on my machine?

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

I checked two other similar answers, one had a typo and in another one it was suggested to use select#menu, but that's not really true. The <select> element is a child of the <div> element with ID of 'menu' so #menu select should work. Besides it works in the video anyway.

Martijn Brackman
seal-mask
.a{fill-rule:evenodd;}techdegree
Martijn Brackman
Full Stack JavaScript Techdegree Student 3,721 Points
Martijn Brackman
.a{fill-rule:evenodd;}techdegree
Martijn Brackman
Full Stack JavaScript Techdegree Student 3,721 Points 
@media (min-width:568px) {
    #menu select, #menu button {
        display:none;
    }
}

Remove the space before 568px?

I had a similar problem in another course and that seemed to solve it. Although it's not wrong to type a space before the number.

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 17,885 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 17,885 Points

Make sure there are no rules below yours that overwrite the style. This is the cascading part of CSS. In most cases, your media query should come last.

Priyesh Tungare
Priyesh Tungare
13,168 Points
Priyesh Tungare
Priyesh Tungare
13,168 Points

Hi Manish,

Were you able to resolve this issue? I am also facing the same issue and not sure why the media css styling is not working.

EDIT: This change is not working in Google Chrome browser. I launched the preview in Safari and was able to see the code work.

Thanks, Priyesh

1 Answer

Anthony c
Anthony c
20,907 Points
Anthony c
Anthony c
20,907 Points

I had to split them up

'''css

@media (min-width: 568px) { 

#menu select { display: none; } 

#menu button { display: none; }

}

'''