Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

CSS media queries

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!

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

@Dave

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

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

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.

thanks

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

cupcake img {}