CSS media queries

Question

Hello,

I'm currently stuck on the "Implementing Media Queries" quiz in the Adaptive Design videos.

I'm trying to set an image so it's fluid with the browser, and scales correctly.

Currently, I have this in my CSS:

#menu, #cupcake {
     margin: 5% 0;
} 

#cupcake img {
     max-width: 95%;
}

If anyone is familiar with this tutorial, help would be greatly appreciated. I'm stuck!

Answer 1 · 2013-02-21T15:53:20Z

February 21, 2013 3:53pm

Thank you guys very much for the help!

My mistake was not putting the query above the media queries.

Thanks again!

Answer 2 · 2013-02-21T14:43:17Z

February 21, 2013 2:43pm

@Dave

Here's a hint you don't need margin to do it.

Answer 3 · 2013-02-21T14:48:43Z

February 21, 2013 2:48pm

Hi,

1/3 - all imgs need to scale with browser so the code goes anywhere above the media query:

img { width: 100%; }

You don't need to specify a particular img - the above will catch all imgs in the site. thats why CSS is so great :-)

Answer 4 · 2013-02-21T15:16:02Z

February 21, 2013 3:16pm

@Eoin - width and max-width are not the same thing.

Answer 5 · 2013-02-21T15:30:57Z

February 21, 2013 3:30pm

@James - yes indeed. max-width is for responsive images which is the point of this challenge.

in this quiz simply setting width to 100% does get a correct answer as does max-width.

But you're right - to make them fluid you've got to use max-width.

thanks

Answer 6 · 2013-03-20T03:42:47Z

March 20, 2013 3:42am

also this missing hashtag: where: cupcake img {} should be:

Welcome to the Treehouse Community