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


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!

6 Answers

Thank you guys very much for the help!

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

Thanks again!

James Barnett
James Barnett
39,199 Points


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


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

James Barnett
James Barnett
39,199 Points

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

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


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

cupcake img {}