Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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" />
</div>

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.

Ugh.

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.

Whew!

Thank you so much.

rina

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