Making a div disappear when a 480 max px is reached using media query

I think I may have found something. http://stackoverflow.com/questions/11796297/div-show-hide-media-query

Of course, you'd need to change the max-width in the first media query to 480px.

Hm. Well, sorry that that didn't help.

I'll try setting up something similar and see what results I get.

So, I set up a test website and wrote out all of the media queries that would cause a paragraph to become hidden in the smaller device viewport range, and it seemed to work fine. I minimized my browser to 480px and the text was gone until I resized the page.

One thing I caught in your code was that there isn't a (min-width) in there. Maybe try this:

@media screen and (min-width: 401px) and (max-width: 480px) { .cupcake { display: none; }  }

Also, instead of using .cupcake as a class, try using it as a <div id="cupcake">, and then replace the .cupcake in your media query with #cupcake.

You're welcome! If it doesn't work even then, you could try emailing someone from Treehouse about the issue; or you could just look it up on Google and see what you get.