By AltGrade Editorial · Reviewed by AltGrade · Last updated

Fix sideways scrolling

At a narrow width, a fixed layout pushes the price and button off screen.

Zoomed-in shoppers cannot reach the control.

Steps

  1. Set the window to 320 pixels wide.
  2. Scroll a product page.
  3. Only data tables and maps may scroll sideways.

Failing example

A hero row stays 960 pixels wide.

Better example

The title, price and button stack.

Shopify

Test the Shopify theme at 320 pixels and remove min-widths on the product row.

WooCommerce

Override fixed widths in the WooCommerce theme so the summary stacks.

WordPress

Set WordPress images to max-width 100 percent and avoid unwrapping wide blocks.

Wix

In the Wix mobile editor, stack strips that overflow.

WCAG

Shopify steps · Shopify · Missing alt text