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!

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

Nazaam Kutisha
Nazaam Kutisha
7,667 Points
Posted by Nazaam Kutisha
Nazaam Kutisha
7,667 Points

Build a Responsive Website - Adaptive Design - Implementing Media Queries

Build a Responsive Website - Adaptive Design - Implementing Media Queries: Challenge Question 3/3 - On implementing media queries.

I don't know the solution to this question. Please inform me. Thank you.

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

.cupcake-img, { display: none;}

.featured-cupcake, .new-cupcakes { margin: 5% 0; }

Carman A
Carman A
7,672 Points

Your problem is you have .cupcake-img it should be .cupcake img otherwise your code looks ok.

Corey Baker
Corey Baker
4,890 Points

Carman is correct. Check your selector for the images in the cupcake div:

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

  .contact {
  width:100%;
  }

  .menu {
  width:100%;
  }

  .cupcake img {
  width:100%;
  }


  }
Nazaam Kutisha
Nazaam Kutisha
7,667 Points
Nazaam Kutisha
Nazaam Kutisha
7,667 Points

Thank for your response. I got it to work, as Carmen said it was the erroneous hyphen.

1 Answer

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

Can you please provide a link to the challenge your on ?