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

HTML How to Make a Website CSS: Cascading Style Sheets Review: CSS: Cascading Style Sheets

enad dhemesh
enad dhemesh
921 Points
Posted by enad dhemesh
enad dhemesh
921 Points

What is the purpose of using the max-width property on a wrapper div?

any help?

izzy goldman
izzy goldman
12,542 Points

The max-width property is used to set the maximum width of an element.

This prevents the value of the width property from becoming larger than max-width.

Note: The value of the max-width property overrides width.

Steve Tenpas
Steve Tenpas
6,234 Points

It allows the div to have a defined maximum width and yet still allows for a flexible minimum width. This allow the div to flex or adjust to smaller a width for smaller responsive/mobile screen sizes. So for a div with a max-width of 940px it allows for flexible div up to a maximum of 940px or what ever you set your max-width to.

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points
A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

In addition, it's VERY useful in responsive media queries. You can create one with a single value like:

@media screen and (max-width:768px) {<stuff happens here>}

Or as part of a pairing to set upper and lower boundaries, like:

@media screen and (min-width: 641px) and (max-width:768px) {<stuff happens here>}

So your wrapper div and all of its content can inherit different CSS depending on its current width.