Adaptive Design Task 3 of 3

Question

The task is "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."
and im not getting it to disappear.
 @media screen and (max-width : 480px) {
      .contact{
        width: 100%;
      }
      .menu{
        width: 100%;
      }
      .cupcake{
        display: none;
    }

Esteban Ruseler · Answer

@Branko Veljkovic (https://teamtreehouse.com/brankoveljkovic) Thanks, I was stuck on this too. Like Graham I forgot the 'IMG' in .cupcake IMG. Cheers :)

Branko Veljkovic · Answer

sorry, my mistake - didn't read your question carefully. So I just took the test, it says images with .cupcake class to disappear. 
So it would be:
@media screen and (max-width : 480px) {
 .contact{ width: 100%; }
 .menu{ width: 100%; }
 .cupcake img{ display: none; }
}

Graham Holdren · Answer

I did notice that after posting and it still doesnt help, I get the error
"The image is still visible even when the device width is less than 480px."
@media screen and (max-width : 480px) {
      .contact{
        width: 100%;
      }
      .menu{
        width: 100%;
      }
      .cupcake{
        display: none;
      }
    }

Branko Veljkovic · Answer

you are missing curly bracket at the end.

Welcome to the Treehouse Community

Looking to learn something new?

Graham Holdren

Graham Holdren

Adaptive Design Task 3 of 3

4 Answers

Branko Veljkovic

Branko Veljkovic

Graham Holdren

Graham Holdren

Branko Veljkovic

Branko Veljkovic

Esteban Ruseler

Esteban Ruseler