The max-width media feature checks whether the screen is no wider than a specified value. When the condition is true, the browser applies the enclosed CSS; otherwise, it ignores those rules. This helps create an adaptive layout that responds to available space. section 14.4
Use it inside an @media rule:
- Write max-width, a colon, and a width value, such as 350px. section 14.4
- The condition includes screens exactly at the stated width: max-width: 350px means 350 pixels or less. section 14.4
- Use it to change layout, sizing, or visibility when space becomes tight; min-width handles screens at least as wide as a value. section 14.4
Stack a grid on narrow screens
At 450 pixels or less, this rule changes a three-column grid to one column and reduces the heading size: @media (max-width: 450px) { .container { grid-template-columns: 1fr; } h1 { font-size: 24px; } }
