Menu

Individual skill

horizontal-scroll

0upvotes

Use when applies to all CSS layout rules. Check `width`, `min-width`, fixed pixel values on containers, `overflow`, `white-space`, and `word-break` properties. Use when auditing responsive design or WCAG 2.1 Level AA compliance. Test at 320px viewport width and at 400% browser zoom.

skills/horizontal-scroll/SKILL.md

Read pinned source

Source commit e8d14d049010e2ce25afcd5e8609dfcbbe63e47e

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Instructions only
Last checked
Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
74,703
Repository last updated
Oct 31, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Prevent horizontal scrolling

Low-vision users who cannot read at standard zoom levels increase browser zoom to 200–400%. At these zoom levels, a 1280px-wide page becomes effectively 320px wide. If elements overflow the viewport, users must scroll both vertically and horizontally to read content — this is exhausting and error-prone with a screen magnifier. WCAG 2.1 SC 1.4.10 (Reflow) specifically addresses this, requiring that all content is available without two-dimensional scrolling at 400% zoom.

## Quick Reference

- Pages must not produce horizontal scrollbars at viewport widths of 320px and above — WCAG 2.1 SC 1.4.10 (Reflow)
- WCAG 2.1 SC 1.4.10 requires content to reflow at 400% zoom (equivalent to 320px CSS width) without horizontal scroll
- Common causes: fixed-width elements wider than the viewport, `width: 100vw` not accounting for scrollbar width, long unbreakable strings, `white-space: nowrap`
- Use `max-width: 100%` on images and media, `overflow-wrap: break-word` on text containers, and fluid layout units

## Check

Test the page at a 320px CSS viewport width (equivalent to 400% browser zoom on a 1280px screen). Look for horizontal scrollbars or content overflowing outside the viewport. Specifically check: (1) elements with fixed `width` values in px that exceed the viewport; (2) `min-width` values that prevent shrinking; (3) images or media without `max-width: 100%`; (4) `white-space: nowrap` on text that causes overflow; (5) `width: 100vw` on elements (scrollbar width causes overflow); (6) long URLs or unbreakable strings in content areas.
Back to top