Review CSS layouts for unwanted horizontal scrolling on narrow screens and at high browser zoom. Identify fixed widths, overflowing media, and unbroken text, then apply layout fixes that keep content readable within the viewport.
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.
Review the instructions the agent will receive before you install.
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.
width: 100vw not accounting for scrollbar width, long unbreakable strings, white-space: nowrapmax-width: 100% on images and media, overflow-wrap: break-word on text containers, and fluid layout unitsTest 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.
(1) Replace fixed width: Npx on layout containers with max-width: Npx plus width: 100%. (2) Add max-width: 100% and height: auto to all images and media. (3) Apply overflow-wrap: break-word (with fallback word-wrap: break-word) to text containers that may contain long strings. (4) Replace width: 100vw with width: 100% on full-width elements (avoid scrollbar overflow). (5) Use CSS Grid or Flexbox with flex-wrap: wrap for multi-column layouts. (6) For data tables, wrap in a scrollable container: overflow-x: auto on the table wrapper, not the page body.
WCAG 2.1 SC 1.4.10 (Reflow, Level AA) requires that content does not require two-dimensional scrolling when displayed at a width of 320 CSS pixels or a height of 256 CSS pixels. This corresponds to 400% zoom on a 1280×1024 display. Exceptions are made for content that requires two-dimensional layout for usage (e.g., data tables, map interfaces, video). For all other content — body text, navigation, forms, images — horizontal scrolling is a barrier for screen magnification users who cannot see the full page width.
Review stylesheets, component styles, and responsive states related to Prevent horizontal scrolling. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/css/horizontal-scroll
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.
Review and add automated accessibility checks for components, pages, and continuous integration workflows. Use axe-based tools to detect structural and attribute issues, while identifying checks that still need keyboard or screen reader testing.
Review sign-in, registration, multi-factor authentication, and account recovery for accessibility barriers. Find blocked paste, difficult code entry, and inaccessible backup methods, then suggest authentication paths that support password managers, autofill, or device approval.
Review form errors, success messages, and live updates so screen reader users receive important notifications. Check the HTML delivered to the browser, announcement settings, display duration, and dismissal controls, then identify specific elements that need changes.
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.