Understanding max-width

 

The max-width setting is used to adjust how wide content should appear. The higher the max-width the wider the content; the lower the max-width the more condensed the content.

For example, below are two screenshots showing how different values affect the width of the content. 

 

This setting can be defined at both the section and box level, and the appearance of the content often depends on the value of this setting at both levels. In the above examples, the max-width of the box (which contains all the content in this section) was set to "auto". This means that the box inherited the width defined at the section level. This is why the above examples show changes to the appearance of the text content when the value of the section's max-width change.

Can a section's max-width be "auto"?

Yes! When you set a section's max-width to auto you're instructing the section to take up the entire width of the screen. In this case, the content will stretch from one end to the other of a screen - no matter how wide a screen is (even this screen).

This is important because it highlights the fact that adjusting the max-width of a section won't always change the appearance of the content, nor will adjusting the max-width on a box.

Below is an example of this behavior. The section has a max-width of 1200px, but because the box has a max-width of 600px the appearance of the content isn't changed.

 

Here's a second example: the box below has a max-width of 600px, but the content in the box can't extend past 200px. This is because the max-width of the section is set to 200px, which means that's the upper limit for any content it contains.

Articles in this section

Was this article helpful?
0 out of 0 found this helpful
Share

Comments

0 comments

Please sign in to leave a comment.