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

CSS

Posted by rina andrejev
rina andrejev
1,486 Points

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
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

Scott Magdalein
Scott Magdalein
2,406 Points

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

Scott Magdalein
Scott Magdalein
2,406 Points

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 }

rina andrejev
rina andrejev
1,486 Points

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
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}

rina andrejev
rina andrejev
1,486 Points

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.

Scott Magdalein
Scott Magdalein
2,406 Points

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.

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

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.

rina andrejev
rina andrejev
1,486 Points
rina andrejev
rina andrejev
1,486 Points

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
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