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 CSS Layout Basics Page Layout with the Float Property Wrapping Text Around Images with Floats

Allan Prophitt
Allan Prophitt
4,396 Points
Posted by Allan Prophitt
Allan Prophitt
4,396 Points

Why does the image become massive when the browser is reduced in width?

When the browser is reduced to a certain width, the .feat-image becomes much larger than it is normally. I was just wondering what is causing that.

1 Answer

Ryan M
Ryan M
16,509 Points
Ryan M
Ryan M
16,509 Points

The width declaration of the .feat-img element is inside a min-width media query. This means that it is only being applied if the viewport size is at least 789px wide. When you resize to a viewport size smaller than this, the image takes on its default properties. Normally, images will be as wide as their inherent image width by default, but as this is an SVG, it doesn't really have a size so in this case it grows to 100% of the parent container's content area.