Proposed CSC Standards
Responsive standards
How layouts reflow from 320px through 1440px.
Rules
Prevent page-level horizontal overflow
At 320, 375, 768, 1024, and 1440 CSS pixels, document scrollWidth equals the viewport width.
Implementation detail
Proposed CSC Standard. Component regions may scroll, the page may not.
Use min-width: 0 on flex children. Do not set fixed widths wider than the viewport.
Check: Compare scrollWidth and innerWidth at those widths.
Stack multi-column layouts under 760px
Detail columns, card grids, wizard fields, and dashboard metrics become one column.
Implementation detail
Proposed CSC Standard. The stylesheet already does this at 760px.
Do not override those media queries with a fixed column count.
Check: At 375px those grids have one column.
Prefer mobile-first overrides
Base styles fit a narrow column. Wider layouts add columns in a min-width query.
Implementation detail
A desktop-first rule that forgets the small screen leaves the overflow in place.
Add a max-width override only when matching the existing 760px and 1050px queries.
Check: The narrow layout does not depend on a max-width query to become usable.
Let text grow to 200 percent without losing content
Zoom and text-only resize reflow the page. Content is not clipped.
Implementation detail
WCAG 1.4.4 Resize Text and 1.4.10 Reflow. Reflow at 320 CSS pixels is the practical check.
Avoid fixed heights on text containers. Allow wrapping.
Check: At 320px and at 200 percent zoom, text is readable and the page does not scroll on two axes.
Respect safe areas on mobile web
Fixed bars add padding for env(safe-area-inset-*).
Implementation detail
Proposed CSC Standard for notched devices. The native screen padding is separate.
Add the safe-area inset to fixed footers. Do not assume a 0 inset.
Applies when: A bar is fixed to the top or bottom of the visual viewport.
Check: A fixed footer is not covered by the home indicator in a notched emulator.
Examples
min-width: 0 lets a flex child shrink instead of overflowing.
Imports: None. Dependencies: None. Rules: RSP-001.
.page-wrap { flex: 1; min-width: 0; }
.frame-scroll { overflow: auto; max-width: 100%; }A 960px element forces horizontal scroll at 375px.
Imports: None. Dependencies: None. Rules: RSP-001.
.hero { width: 960px; }Testing checklist
Reusable prompts for this guideline are in the AI Development Hub.