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! While you're at it, check out some resources Treehouse students have shared here.

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 Build a Responsive Website Adaptive Design Implementing Media Queries

Posted by Blake Collins
Blake Collins
1,949 Points

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

I add: /* iPhone */ @media screen and (max-width:480px) { img {width:100%;} }

AND

/* iPad */ @media screen and (max-width:1000px) { img {width:100%;} }

But it keeps saying the image doesn't scale with the browser but it does?

2 Answers

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Try setting the max-width property to 100% and then the width property to auto. Failing that just try, width: auto;

The auto value means that the width will be adjusted automatically to fill the space provided.

Blake Collins
Blake Collins
1,949 Points
Blake Collins
Blake Collins
1,949 Points

Thanks mate, I should have actually just added max-width:100%; under img{} instead of in the media query code section.

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

No worries mate glad to be of help.