← Back to Chapters

CSS Max Width

? CSS Max Width

⚡ Quick Overview

The max-width property controls the maximum width an element can grow to. Unlike width, it allows layouts to shrink on smaller screens.

? Key Concepts

  • Limits how wide elements become
  • Works well with percentage widths
  • Makes designs responsive
  • Prevents overflow

? Syntax & Theory

? View Code Example 
// CSS max-width syntax
selector {
max-width: value;
}

? Width vs Max Width

? View Code Example 
// Fixed vs flexible sizing
.box1 {
width: 600px;
background-color: lightblue;
padding: 10px;
}

.box2 {
max-width: 600px;
width: 100%;
background-color: lightgreen;
padding: 10px;
}

? Live Output / Explanation

Visual Result

Box with width:600px — fixed size
Box with max-width:600px — responsive

? Responsive Design Usage

  • Keeps layouts readable
  • Prevents large images
  • Improves mobile view

? Responsive Container Example

? View Code Example 
// Centered container
.container {
max-width: 800px;
width: 100%;
margin: auto;
padding: 16px;
}

? Tips & Best Practices

  • Use width: 100% with max-width for fluid, capped layouts
  • Apply max-width to images to keep them responsive
  • Avoid fixed widths on containers for better small-screen UX
  • Test with real content and various screen sizes

? Try It Yourself

  1. Create two boxes (one fixed width, one max-width + width:100%)
  2. Resize the browser to narrow and wide widths
  3. Swap px, %, and vw for max-width and observe differences
  4. Check how images behave when only max-width is set