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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Robin Larsson
Robin Larsson
8,079 Points

max-width: 100%?

What is max-width really doing? width: 100% does exactly the same thing for me. I see no difference using width: 100% and max-width: 100%;

3 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points

"max-width" is a maximum width meaning that the element can not be bigger then the value input but can be smaller.

"min-width" is a minimum width meaning that the element can not be smaller then the value input but can be larger.

"width" is a standard width measurement for defining the exact width of an element.

Defining "width:100%" means that the width is 100%.

Defining "max-width:100%" means that the width can be anywhere between 0% and 100% but no more then 100%.

For example if my display has a 1200px availible width. If I create for example:

   width: 100%;
   min-width: 500px;
   max-width: 800px;

"Width: 100%; would set the box to be 1200px width on my display, but lets say I want to limit the maximum size 100% can be, you would do this by defining "max-width" and "min-width" for the vice versa minimum size.

This would mean if my display is larger then 800px width it will make sure my box does not grow bigger then 800px and also that if my display is smaller then 500px it will not shrink smaller then 500px. But if my screen is anywhere between 500px and 800px it will automatically re-size to the availible width of my device that could be anywhere between 500px and 800px;

Robin Larsson
Robin Larsson
8,079 Points

Thanks for great explanations! Now I understand better :)

Vito Huang
Vito Huang
7,281 Points

How about max-width: 100% with width: 500px? The width seems to stick to 500px while the viewport is larger than 500px, but it becomes resizable once the viewport is smaller than 500px.

Could you please help make an explanation behind how max-width: 100% works in this context?