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 Frank Browne
Frank Browne
Courses Plus Student 834 Points

make ".cupcake" div disappear

The girl in the video copy and pasted the code in the video. I don't know the language necessary to make the image disappear.

Question #3?

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.

5 Answers

Edward Boyce
seal-mask
.a{fill-rule:evenodd;}techdegree
Edward Boyce
Front End Web Development Techdegree Student 3,799 Points
Edward Boyce
.a{fill-rule:evenodd;}techdegree
Edward Boyce
Front End Web Development Techdegree Student 3,799 Points

yep, so your looking to make the .cupcake image disappear. So you would use the code;

.cupcake img {
    display:none;
}

What you are doing is picking the image from the cupcake div, (.cupcake img will refer to any images within the cupcake div.) and basically saying at this screen width, hide, do not display.

The code, display: none described in that link.

Vlad Kitanoski
Vlad Kitanoski
2,728 Points

I've been trying to figure this out for 30 minutes lol and I just tried this code and I still get

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

Either I'm doing something wrong, or the validation has something different

James Barnett
James Barnett
39,199 Points

Vlad Kitanoski - I think the reason you are having so much trouble is that you skipped over a few courses. I'd recommend you work through the learn HTML & CSS learning adventure.

Frank Browne
PLUS
Frank Browne
Courses Plus Student 834 Points
Frank Browne
Frank Browne
Courses Plus Student 834 Points

Thanks Edward

Edward Boyce
seal-mask
.a{fill-rule:evenodd;}techdegree
Edward Boyce
Front End Web Development Techdegree Student 3,799 Points
Edward Boyce
.a{fill-rule:evenodd;}techdegree
Edward Boyce
Front End Web Development Techdegree Student 3,799 Points

I added a link so you can read about the display property, you're correct it wasn't mentioned before in those videos, 90% sure so just have a read of that link posted above for the official information on it.

Frank Browne
PLUS
Frank Browne
Courses Plus Student 834 Points
Frank Browne
Frank Browne
Courses Plus Student 834 Points

ok

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The reason display: none; is not mentioned the video is because this is an intermediate course, it assumes basic CSS knowledge (such as the CSS Foundations course).

Check out the Learn HTML & CSS learning adventure to see the order the courses were designed to be taken in.

@Frank - The offical W3C spec can be kinda dense to read.

You can read about the display property over on HTMLDog, my personal favorite HTML & CSS reference.