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


Stuck on Code Challenge (1): Implementing Media Queries

/* Mobile ----------- */ @media screen and (max-width : 480px) { .contact, .menu { width: 100%; } @media screen and (max-width: 480px) { #img .cupcake { display: none; } }

I just cannot seem to grasp what I am doing wrong...hint?? I keep getting the Bummer: image is still visible when less than 480px.

Thanks, Rina

4 Answers

Umy Ikem
Umy Ikem
21,383 Points

I think the problem is with your selector - you're using #img.cupcake which is wrong - if the image has a class you use img.classname - or you can use a descendant selector if the image is inside a div - #nameofyourdiv img {}

Hope this helps

Agree. #img seems wrong. If the html is <img class="cupcake" src="http://something" /> then the selector you want to target would be img.cupcake

Alternatively, if the image is inside a div with the class cupcake like this:

<div class="cupcake">
    <img src="something" />

Than you'd use a selector like this: .cupcake img { styles here }

Hmmm....this code is not working. My latest try is below, but still getting error:

Bummer! The image is still visible even when the device width is less than 480px.

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

Umy Ikem
Umy Ikem
21,383 Points

You didn't put the 'img' at the end of .cupcake. Like Scott pointed out, it should be .cupcake img { display:none; } except you gave the <img> element a class of cupcake. For example <img class="cupcake" src="http://something"> then you can use img.cupcake {display:none}

I tried .cupcake img {display:none}. That did not work either. I have tried it every which way and still getting the error that the image still shows if the width is less than 480px.


Irina, can you link to the challenge in question so I can see the markup? Also, try deleting your browser cache and refreshing the page. Sometimes Treehouse (and browsers) are a little overzealous with caching pages.

If this is the challenge: http://teamtreehouse.com/library/websites/build-a-responsive-website/adaptive-design/implementing-media-queries-2

you don't have to do anything to the media queries you just add max-width: 100%; to the img right below the body.

Thanks to everyone. Sorry if I drove you crazy. Scott, you were spot on with the caching issue...I reopened my browser, started over and got it on my first attempt.


Thank you so much.


Umy Ikem
Umy Ikem
21,383 Points

Glad you got that fixed, i really didn't know what to suggest anymore. Thanks to Scott too, I'll keep that caching issue in mind