Page Containers
page - width contols
Page Containers sm, md, lg, xl
Responsive Width Control
Using clamp() + vw + max-width (px) creates adaptive containers that flexibly scale across viewports but never grow too wide.
Matches modern best practices for responsive layouts (good for desktops, tablets, and phones).
Flexible Baseline for Containers
.container-xl uses 100% width - True full-viewport sections (hero banners, background images, etc.).
.container-lg, .container-md, .container-sm progressively shrink for content width comfort.
The container widths are chosen to maintain optimal line length for readability, generally 60–75 characters per line - while also accommodating responsive grid alignment. This helps support WCAG 1.4.8 (Visual Presentation) and 1.4.10 (Reflow).
All container widths respect `width: 100%` on small viewports and scale fluidly with `clamp()`, which allows text and layouts to adapt when zoomed or when the browser width is resized supporting WCAG 1.4.10 (Reflow).
In rare cases where strict layout alignment is required, a `.container-fixed` utility can be used to lock containers to a specific `max-width`. Use only when responsive scaling is not desired, such as fixed headers or comparison tables.
Future-Proof: If using dvw (Dynamic Viewport Units) Including dvw after vw
dvw accounts for browser chrome (e.g., mobile address bars) shrinking the visible area.
Helps prevent unexpected overflow issues especially on iOS Safari and Android Chrome.
| Feature | Support | Notes |
|---|---|---|
| vw (viewport width unit) | Full | Supported in all major browsers. fall back for dvw |
| dvw (dynamic viewport width unit) | Partial | Supported in Safari 16+, Chrome 108+, Edge 108+, Firefox 109+. |
| clamp() | Full | Fully supported in all modern browsers. |
| CSS Variables (var()) | Full | Fully supported except in legacy IE (Internet Explorer). |
Stackable Containers
Stackable: In general don't stack sections inside other section blocks use divs inside of a section.
Best Practice: Avoid nesting multiple <section> or container-like layout wrappers (e.g., .container-* elements) unless it serves a specific design or structural need. Overuse can increase layout complexity and reduce maintainability. Use inner containers only when you need to constrain or realign content differently within a full-width or semantically distinct parent section.
WCAG and semantic HTML spec allows nested <section> elements as long as the nested section has its own heading (<h2>, <h3>, etc.) to describe the content.
Ensure interactive components within containers (e.g., modals, tabs, accordions) remain focusable, usable via keyboard, and visually aligned at all responsive breakpoints aligning with WCAG 2.1.1 (Keyboard), 2.4.7 (Focus Visible), and 1.3.4 (Orientation).