Add the appropriate CSS code to the CSS to make images scale with the fluid layout.

I am stuck in the same place as Mustafa Kasim... I tried this code and it told me : "Bummer! The image isn't scaling with the browser. How could you set the width of the image so that it's fluid?" This is where I entered the code:

/* Mobile ----------- */
@media screen and (max-width : 480px) {
  img { 
    margin: 2% 0; 
    width: 100%; 
    height: 100%; 
  }
}

Oh woops! I just tried entering the img code you gave alone below the p { } instead of within the mobile tags and it worked like a charm! Thanks so much!!

Thats' correct as you don't need the @media part yet.

Happy to help whenever. Just @ my name to notify me.

After line 46, put in this code:

  img { 
margin: 2% 0; 
width: 100%; 
height: 100%; 

}

Hi Adam,

Thank you for the reply. But don't I need to put the img selector somewhere since it is asking me to, "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."

..?

Sorry to keep relying on you again Adam. But I'm stuck again.

The next challenge: Add the appropriate CSS code to the media query so that ".contact" and ".menu" fill the entire container width when the device or browser width is at most 480px wide.

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

I'm way off right..?

Its ok see here

@media screen and (max-width:480px) {
.contact, .menu {
width: 100%;    
}
}

So the deal with media queries are no different from regular CSS. so an easier way to do it would be to just do the normal css first so contact and menu = width 100%. Then just to wrap a media query around it like above. Also see the link for a full guide for the world wide web consortium.

Thank you for the help. It worked.

But Im stuck now at the 3rd and last challenge...

/* Mobile ----------- */ @media screen and (max-width:480px) { .contact, .menu, .cupcake {visibility:hidden} { width: 100%;
} }

I'm kind of unsure where to put the div, inside along with the other elements? I tried placing separately too..

I don't know what the question is askin you but what you posted above is slightly incorrect. visibility: hiiden; and width:100%; should be between the same set of { }

@media screen and (place for size/query) { place for all css relevant to that query }

If this isn't sinking in then I would suggest watching the videos again until it sticks and read the link i posted above, the more you try it the easier it will get.

Thanks

Alright thank you Adam.

You can always tag me on Twitter too if you need help and im not here. its @Sacki2013

I believe I remember this question correctly, and I think this is how it was done :

@media screen and (max-width:480px) { .contact, .menu { width: 100%; } .cupcake { display: none } }

Visibility: hidden might right too though. but you are not trying to hide .contact and .menu, so .cupcake's css needs to be within separate { }s.

Hi Claire,

Thank you for the help, but I'm still stuck on this part.. I have tried using visibility: hidden; or display: none;

but im still having no luck...

I rewatched the videos but the stuff that the girl shows in the video seems to suggest that to his an element you have to use #cupcake {display:none;}

...as to where or exactly how im unsure...