Responsive Design
Overview
The live store was tested across three phone and tablet viewports using Chrome DevTools device emulation and full-page screenshots. Every core page (home, collection, product, checkout) renders cleanly at every tested size. No rendering bugs were found.
This is a baseline check against the Impulse theme's built-in breakpoints, not a full cross-device QA pass. For the full writeup and screenshots, see shopify/docs/deliverables/mobile-testing-week-3.md.
Viewports Tested
Pages Tested
Findings
iPhone 12 Pro - 390
| Page | Result |
|---|---|
| Home | Clean. Single-column stack. |
| Shop All | Clean. 2-col grid. |
| Product | Clean. Single-column stack. |
| Checkout | Clean. Shopify-controlled UI. |
iPhone 14 Pro Max - 430
| Page | Result |
|---|---|
| Home | Clean. Hero, featured carousel, Most Popular grid, "A Quicker Way To Study" band, product highlight, founder story, testimonials carousel, Shop by Materials 2-col grid, footer - all render correctly. |
| Shop All | Clean. 2-col product grid. Filter accordion collapsed at top. Product tiles stack with image, title, review count, price. |
| Product | Clean. Image carousel, title, price, format selector (3 options wrap correctly to 2 rows), quantity stepper, ATC, Description / Product Specs accordions, You May Also Be Interested In 3-col cross-sell, customer reviews with rating distribution and review list. |
| Checkout | Clean. Shopify-controlled UI. |
iPad Air - 768
| Page | Result |
|---|---|
| Home | Clean. 4-col Most Popular, 4-col Shop by Materials. |
| Shop All | Clean. 3-col grid. Lazy-loaded product images below the fold were not captured in the full-page screenshot (capture timing artifact, not a real rendering bug - verified manually by scrolling). |
| Product | Clean. 2-col layout (image left, details right), 3-col cross-sell, full-width reviews section. |
| Checkout | Clean. Shopify-controlled UI. |
Notes
Checkout renders correctly at all sizes but is outside the scope of theme work. Theme-level changes would not affect it.
Impulse theme defers below-the-fold product images. This is standard behavior, not a bug. Verified by manual scroll.
iPhone SE and older small iPhones sit at 375. The 15px delta to 390 does not cross any CSS breakpoint in the Impulse theme, so layout is identical at both widths.