Menu
Box Model & Layout
CSS Max-widths
Constrain width for responsive designs.
1Using Max-Width
max-width prevents an element from getting larger than the specified value, but lets it shrink on small screens.
Example Code
css
div {
max-width: 600px;
width: 100%;
margin: 0 auto;
}2Understand it in a real interface
A maximum width can keep a paragraph comfortable to read while still allowing it to shrink on a phone. A fixed width alone may exceed the available space. For a centered content area, combine a flexible width, a maximum, suitable padding, and automatic inline margins.
3Try it yourself
Create an article with width: 100% and a readable max-width. Add border-box sizing and inline padding, then resize the container. Compare the behavior with a rigid pixel width and observe where horizontal scrolling begins.
Finished reading?
Mark this topic as complete to track progress.