Page Containers

page - width controls

container-full
container-xl
container-lg
container-md
container-sm

Page Containers sm, md, lg, xl, full

Responsive Width Control

Using clamp() + vw creates adaptive containers that scale across viewports but do not grow past their set maximum width values.

Matches modern best practices for responsive layouts on desktops, tablets, and phones.

Flexible Baseline for Containers

.container-full uses width: 100% and is useful for full-width page sections, hero banners, and broad layout regions.

.container-xl is still available as a wide container option and uses clamp(350px, 98%, 2000px).

.container-lg, .container-md, and .container-sm progressively constrain line length for readability.

Container widths are chosen to support readable content width and flexible layout alignment across the design system. This supports WCAG guidance related to visual presentation and reflow.

All containers scale fluidly with clamp(), supporting reflow when zoomed or resized.

Available Container Classes in the CSS

  • .container-full → width: 100%
  • .container-xl → width: clamp(350px, 98%, 2000px)
  • .container-lg → width: clamp(320px, 90%, 1536px)
  • .container-md → width: clamp(280px, 85%, 1280px)
  • .container-sm → width: clamp(260px, 80%, 1024px)

Fixed Width Option

The CSS also includes .container-fixed.container-lg, which sets max-width: 1200px and width: 100%. Use that only when you need a more locked large-width layout.

Responsive Behavior Beyond Breakpoints

Definition: Accessible responsive design must remain readable, operable, and understandable across all viewport sizes, including in-between widths, zoomed views, and user-modified text and spacing, not just at predefined breakpoints.

Accessibility Requirement: Content must reflow without loss of information or functionality. Text must resize without breaking layout, and interactive elements must remain usable regardless of screen size or zoom level.

Best Practice: Favor fluid, content-driven layouts. Use flexible units (%, em, rem, clamp()), intrinsic sizing, and adaptable spacing so layouts respond continuously. Avoid fixed heights, rigid widths, and breakpoint-only assumptions.

Design System Guidance: Components should be tested across a wide range of viewport sizes, including non-breakpoint widths and high zoom levels. Minor visual imperfection between breakpoints is acceptable; loss of readability, blocked interaction, clipped content, or broken navigation is not.

Fluid Responsiveness (Not Just Breakpoints)

Expectation: Layouts must remain usable and readable across the full range of viewport widths, including intermediate sizes between breakpoints, browser zoom states, split-screen layouts, and user-scaled text.

Accessibility Impact: Breakpoint-only layouts may appear correct at specific sizes but become unusable between them. Loss of content, clipped text, overlapping elements, hidden controls, or forced horizontal scrolling at any width introduces risk.

Implementation Guidance: Prefer flexible containers, intrinsic sizing, and proportional spacing over rigid sizing. Breakpoints should refine layout, not rescue it.

Evaluation Standard: A layout is accessible when reading, navigation, and interaction work at any width without requiring precise viewport alignment. Minor visual imbalance is acceptable; functional degradation is not.

Audit Checks

  • Reflow check: confirm no content/control is lost and no two-direction scrolling is required.
  • Zoom check: confirm navigation, headings, and controls remain usable and visible.
  • Text growth check: confirm headings and buttons wrap and remain readable without clipping.
  • Interaction check: tab through controls at multiple sizes; verify focus visibility and no off-screen traps.

Do

  • Test continuously by dragging the viewport across sizes, not only at breakpoints.
  • Validate reflow at narrow widths and at high zoom without losing content or controls.
  • Use fluid sizing with max-width, percentages, flexible grids, and intrinsic layout.
  • Use scalable typography (e.g., rem and clamp()) and allow line-wrapping.
  • Let containers grow with content; prefer min-height over fixed heights when possible.
  • Keep interactions operable (keyboard, touch, pointer) at every size; ensure focus stays visible.
  • Support user overrides for text size and spacing without clipping or overlap.

Avoid

  • Breakpoint-only layouts that fall apart between sizes.
  • Fixed heights on text containers that cause clipping when text grows or wraps.
  • Horizontal scrolling for standard page content due to rigid widths or unwrapped tables.
  • Absolute positioning for essential content or controls that can overlap at intermediate widths.
  • Hard-coded type sizes in px that don’t respond to user settings.
  • Hover-only access to critical navigation or controls without a keyboard/touch equivalent.

Browser support

Feature Support Notes
vw (viewport width unit) Full Supported in all major browsers.
clamp() Full Fully supported in all modern browsers.
CSS Variables (var()) Full Supported except legacy Internet Explorer.

Stackable Containers

Stackable: In general, don’t stack sections inside other section blocks; use divs inside a section.

Best Practice: Avoid nesting multiple <section> or container-like layout wrappers (e.g., .container-*) unless it serves a specific design or structural need. Use inner containers only when you need to constrain or realign content differently within a full-width or semantically distinct parent section.

Nested <section> elements are valid if the nested section has its own heading.

Ensure interactive components within containers (modals, tabs, accordions) remain focusable, usable via keyboard, and visually aligned at all responsive breakpoints.



Dark Mode - needs work

It seems that you have reduce motion enabled!