Flash cards
Review the key moves
What is the main idea behind CSS The max-width Property?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: 500px;Put the learning moves in the order that makes the concept easiest to apply.
The CSS max-width Property
The max-width property defines the maximum width of an element.
This property prevents the element's width from being larger than the specified value (it can be smaller, but not larger).
This property is useful for creating responsive layouts and to ensure content readability across various screen sizes.
Problem with width
Here we have a horizontally centered <div> element with a specific width (600px):
What happens to the <div> above if the browser window is smaller than the width of the element? Some of the content will not show, and the browser might add a horizontal scrollbar to the page.
Using max-width instead
Now, we use the max-width property instead. This will improve the browser's handling of small windows:
Tip
Resize the browser window to less than 600px wide, to see the difference between the two <div>s!
Here is the CSS code for the two <div>s above:
Example
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}Live preview
CSS Properties
| Property | Description |
|---|---|
| max-width | Defines the maximum width of an element |
| width | Sets the width of an element |