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

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

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.

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

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}

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. :)