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

Posted by Richard Santana
Richard Santana
5,305 Points

the "#menu ul" is still displays in smaller windows.

the #menu ul is still displaying in the window, while in smaller screens. Also, the select and button do not move up into the black bar.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

It would help to see your code.

The best way to do that is to use the snapshot function in the workspace and provide the link to it.

Richard Santana
Richard Santana
5,305 Points

this is the jquery code...

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

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

}

4 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Don Macarthur, your issue has a different cause:

:point_right: Your comments are not properly formatted.

Just above your first media query, you have three lines that begin with two slashes ("//"). This causes a syntax error that invalidates the media query below.

In CSS, comments must begin with "/*" and end with "*/", like in this example:

/* This is a valid CSS comment */
Don Macarthur
Don Macarthur
28,430 Points

The comments!! I didn't even think of looking at those.

I had been following along with the video and copied my comments over from my .js file so they were formatted for JavaScript. Rookie mistake.... :-)

Thanks for the help :-)

graemehunt
graemehunt
6,577 Points

Thank you so much Steven! Made my eyes go funny trying to work out this bug - and thanks Don for having the same issue and asking the question!

Andrew McPheron
Andrew McPheron
14,290 Points

This was my issue as well. I had no idea CSS didn't allow the same JavaScript comments, the video effectively shows him just cut/paste the comments over.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

That is not jQuery code, it's CSS. And it may be that this rule is being ignored:

@media (min-width:320px)and(max-width:568px){

:point_right: Try adding spaces to both sides of the word and. I would also add a space before the brace, but that's probably not causing a problem.

Also note that this rule will not be effective on screens smaller than 320px.

It also looks like you have a stray close-brace at the end of the CSS file.

If you have any further trouble, please share the workspace snapshot. That makes it possible to see exactly what you are working with.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Richard Santana, I solved Don's issue ... but did this help yours?

Don Macarthur
Don Macarthur
28,430 Points
Don Macarthur
Don Macarthur
28,430 Points

I've got this problem as well and can't for the life of me see what I am doing differently to Andrew in the video.

My workspace snapshot is:-

https://w.trhou.se/znl3z8rs26

Ullas Savkoor
Ullas Savkoor
6,028 Points
Ullas Savkoor
Ullas Savkoor
6,028 Points

Hi, I am not sure if this helps, but anyway- I too faced the same problem in this project.A little info about my setup. I download the project instead of working in workspaces .

Solution:When I went to console it showed Jquery error and I realized my net connection was down. The reason then I found was Jquery library was not getting downloaded from the link mentioned in the script tag of html files. And the issue was resolved when I restored my net connection. So I would recommend that you verify your net connection and to check the console of your browser to see if there any errors related to Jquery.

Don Macarthur
Don Macarthur
28,430 Points

Hi Ullas,

Thanks for taking the time to post a solution, and my apologies for taking so long to respond. My problem was related to the comments not being formatted correctly in my CSS file, as pointed out by Steven above.

That is helpful to know of your problem though so if I encounter something similar in the future I will keep it in mind.

Thanks again, Don :-)

docgunthrop
docgunthrop
12,445 Points

Better yet, to avoid this altogether, is to download the jQuery min js files and store them locally. Then modify the <script> tag "src" to point to the local file.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Remember to select a "best answer" to mark the question solved.