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
armand Rodriguez
7,830 PointsMax 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
15,604 PointsYou 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
7,830 PointsCleared it right up, thank you so much!