responsive-storefront

Use display: grid with grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)) so columns adjust automatically. Write base styles for mobile first, then add min-width media queries at 640px and 1024px for larger screens.

Create a fixed bottom bar that appears when the primary Add to Cart button scrolls out of view, detected via IntersectionObserver or getBoundingClientRect. Animate it with transform: translateY and add env(safe-area-inset-bottom) padding for iPhone home indicators.

Yes, the Skill includes platform-specific configuration steps for Shopify Dawn, WooCommerce themes like Astra, Kadence, and Flatsome, and BigCommerce Cornerstone. Custom headless storefronts can use the provided CSS and React patterns directly.

iOS Safari's dynamic toolbar changes the viewport height, so 100vh includes toolbar height and causes overflow. Use 100dvh (dynamic viewport height) instead, with a @supports fallback for older browsers.

WCAG 2.5.5 requires a minimum 44px tap target. Set min-height and min-width of 44px on buttons, links, selects, and swatches globally; visual indicators like color swatch circles can be smaller as long as the hit area stays 44px.

Scroll leaks to the body when the drawer lacks containment. Apply overscroll-behavior: contain on the drawer and set overflow: hidden plus touch-action: none on the body while the drawer is open.