CSS — Max-width

The problem with fixed widths

.box { width: 900px; }

On a 1400px screen: fine. On a 400px phone: horizontal scrolling disaster.

max-width fixes it — grow freely, but never beyond the cap:

.box { max-width: 900px; }   /* fills small screens, caps on big ones */

Declaration	Small screen	Large screen
width: 900px	Overflows ❌	900px
max-width: 900px	Full width ✅	900px ✅

The container pattern

The single most reused CSS snippet in professional sites:

.container {
    max-width: 1100px;
    margin: 0 auto;      /* center when capped */
    padding: 0 24px;     /* side gutters on small screens */
}

What the browser displays

(On desktop: content held to a comfortable reading column in the middle of the page. On mobile: same content with modest edge spacing. Every breakpoint, no media queries needed.)

Every element inside inherits sane line lengths automatically:

<div class="container">
    <h1>Welcome</h1>
    <p>Readable at any size…</p>
</div>

Why line length matters

Text stretching full-width on a 27" monitor produces 200-character lines — readers lose their place between lines. Typography research points to roughly 45–75 characters per line; a max-width around 65–75ch or ~700px for prose is the classic answer:

article {
    max-width: 70ch;     /* ch = width of the "0" glyph */
    margin: 0 auto;
}

ch units tie the cap to the font itself — elegantly responsive.

min- counterparts

.panel {
    min-width: 280px;    /* never squeeze smaller          */
    min-height: 120px;   /* never collapse below this      */
}

Common uses:

• min-height: 100vh on footers' page wrappers (sticky-footer layouts)
• min-height instead of fixed height so growing content can't overflow
• min-width on flex items that keep collapsing too far

Images and max-width together

The famous two-liner from the height/width lesson earns its context here:

img {
    max-width: 100%;   /* never wider than parent box */
    height: auto;      /* keep aspect ratio           */
}

Without it, any image larger than its container blows out the layout on phones.

Mini Practice

1. Build .container; test by resizing from phone to 4K width
2. Apply article { max-width: 70ch } and count characters per line
3. Break an intentionally-fixed layout at 400px width, then fix it with max-width
4. Combine: container + images rule + margin: 0 auto
5. Give a footer wrapper min-height: 100vh minus header — explore the sticky-footer idea

Next: position →