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.

HTML How to Make a Website Responsive Web Design and Testing Responsive Web Design

armand Rodriguez
armand Rodriguez
7,830 Points

Max Width is...?

The video talks about how img { max-width:100%; } allows for images to be fluid. I just want to clarify, that 100% means 100% of the box it's allowed, and that box is defined by #gallery li {width: 45%} with 2.5% margins? correct? So the image is able to be fluid because it can maintain 100% of the #gallery li width? I'm just a little confused.

2 Answers

Charles Kenney
Charles Kenney
15,604 Points

You are on the right path here. The 'max-width:100%;' does mean that it takes up 100% of the parent container (#gallery). These containers start 5% in on each side of the viewport (due to the margin properties of the #wrapper container) and further have a width of 45%. This essentially creates a set of 2 row columns. The gallery can be seen before he goes into depth on the img selector in the css. When Nick says that the images are fluid/responsive, he is referring to how the img size is relative to the viewport's size.

In other words, the containers, and thus the images in the containers will scale as the viewport (browser window) increases as percentages are relative units.

armand Rodriguez
armand Rodriguez
7,830 Points

Cleared it right up, thank you so much!