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 Alex Burdine
Alex Burdine
13,941 Points

Implementing Media Queries Quiz

"Add the appropriate CSS code to the media query so that images within the ".cupcake" div disappear when the device or browser width is at most 480px wide."

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

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

what am i doing wrong?

6 Answers

Ian Lunn
Ian Lunn
4,558 Points
Ian Lunn
Ian Lunn
4,558 Points

You most likely want to change the .cupcake selector to .cupcake img, that way only the images are display: none, rather than the whole div.

Omh MG
Omh MG
19,233 Points

Thank you Ian!

Alex Burdine
Alex Burdine
13,941 Points
Alex Burdine
Alex Burdine
13,941 Points

High Five Ian!

Worked perfectly.

ecp
ecp
838 Points
ecp
ecp
838 Points

High five team!

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Excellent work... just got me out of the same pickle :)

Cheers

Ant

Rafael Dayalo
Rafael Dayalo
2,528 Points
Rafael Dayalo
Rafael Dayalo
2,528 Points

haha, I'm also stuck a while ago tnx team

Martin Simicic
Martin Simicic
1,962 Points
Martin Simicic
Martin Simicic
1,962 Points

Thx Ian, I got it right with .cupcake, img a comma between .cupake and img was needed.