Mobile & Responsive Playground
Mobile & Responsive Playground
Validate viewport behavior, touch affordances, and responsive layout stability.
Purpose
This playground focuses on mobile viewport bugs, touch target sizing, keyboard overlays, and responsive breakpoints.
Storefront hero
Hero copy should wrap cleanly on the narrowest phone width without clipping.
Summer Sale — Free Shipping on Every Order Today
Shop mobile-ready deals across the catalog.
Product cards
Render a product card, then measure the Add-to-Cart control at a phone viewport. The control should be tappable by a human thumb.
Order history
Scroll through recent orders on a narrow phone. The table should fit the screen without forcing sideways movement.
| Order | Product | Date | Total | Status |
|---|---|---|---|---|
| ORD-1042 | Wireless Headphones | 2026-06-01 | $89.00 | Delivered |
| ORD-1038 | USB-C Charging Dock | 2026-05-28 | $34.50 | Shipped |
| ORD-1031 | Mechanical Keyboard | 2026-05-20 | $129.00 | Processing |
Search & sticky nav
Focus the search field on a short phone viewport. The sticky app bar should not cover the field you are typing into.
Browse products, then search for something specific.
Featured collection 1 — tap through seasonal picks.
Featured collection 2 — tap through seasonal picks.
Featured collection 3 — tap through seasonal picks.
Featured collection 4 — tap through seasonal picks.
Featured collection 5 — tap through seasonal picks.
Featured collection 6 — tap through seasonal picks.
Product image card
Product photos should scale inside their card on the narrowest supported phone width.
Travel Mug
$24.00
Order details modal
Open the order summary on a short phone. The close control should stay reachable while you scroll the details.
Checkout form
Quantity and search fields on iOS should not trigger automatic zoom when focused.
Cart quantity
Adjust item quantity in the cart. Stepper buttons need enough spacing for touch input.
Known Intentional Issues (8)
Show hints (8)
Touch targets on product cards are smaller than 44x44px
At 375px viewport, assert all buttons have height >= 44px
Order history table causes horizontal scroll on mobile
At 375px viewport, assert document body has no horizontal scrollbar
Sticky nav covers form input when mobile keyboard opens
Focus search input at 375px and assert input is within visible viewport
Product images overflow their container at 320px
At 320px viewport, assert all product images have width <= parent container width
Modal cannot be dismissed on small screens — close button scrolls out of view
Open modal at 375x600 viewport and assert close button is within visible bounds
Font size below 16px on input fields triggers iOS zoom
Assert all input elements have computed font-size >= 16px
Cart quantity stepper buttons too close together for touch
Assert gap between quantity stepper buttons is >= 8px at 375px viewport
Hero section text overflows on 320px viewport
At 320px viewport, assert hero heading has no text clipping or overflow: hidden cutoff