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 raymond pope
raymond pope
10,614 Points

Stuck on a question in responsive design stage 3 (Adaptive Design)

Hi all Can someone point me in the right direction to answer the following question:

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

My answer is: 

@media screen and (max-width : 480px) {

  .contact {
    width: 100%;
  }
  .menu {
    width: 100%;
  }
 .cupcake {
display: none;

}
}

But that doesn't seem work. I've tried many alternatives also with no luck. So if there is anybody who can share their knowledge with me it would be most appreciated :)

4 Answers

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You need to include the media query. To get you started it would look like this

@media screen and (max-width: 480px) { }

Then you would include any properties that need to be included at that screen size.

Hope this helps. Give a shout if stuck

raymond pope
raymond pope
10,614 Points
raymond pope
raymond pope
10,614 Points

Hi Adam Thanks for the very quick response. I have the media query already. This is how the whole thing looks:

@media screen and (max-width : 480px) {

  .contact {
    width: 100%;
  }
  .menu {
    width: 100%;
  }
 .cupcake {
display: none;

}
}

Sorry about the confusion! Cheers all the same.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Bill Wood is correct raymond pope you need to use the img selector

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

Hope this clears it up

William Wood
William Wood
4,789 Points
William Wood
William Wood
4,789 Points

just a guess, but if you select .cupcake class, you need to specify the image by selecting img ... in other words, .cupcake img { bla bla}

raymond pope
raymond pope
10,614 Points
raymond pope
raymond pope
10,614 Points

Thanks, that worked but I did try that same combination last night and it didn't give me the green light. I was surprised as that was the obvious solution. I must have missed something or the was a bug in the system. Anyhow the green light's been given. :)