Screenshot a page at every common viewport size. No signup required.
Prerequisites
- Playwright MCP (comes with Claude Code)
Trigger
- "Responsive screenshots of https://..."
- "How does my site look on mobile?"
- "Screenshot this page at different sizes"
Workflow
- For each viewport, resize and screenshot:
| Name | Width | Height | Device |
|---|---|---|---|
| Mobile | 375 | 812 | iPhone 14 |
| Tablet | 768 | 1024 | iPad |
| Laptop | 1280 | 800 | MacBook |
| Desktop | 1920 | 1080 | Full HD |
| Ultrawide | 2560 | 1080 | 34" monitor |
-
For each size:
mcp__playwright__browser_resizeto the viewport- Wait 1 second for reflow
mcp__playwright__browser_take_screenshot- Note any visible issues (overflow, overlap, hidden content)
-
Analyze screenshots for common responsive issues:
- Horizontal scroll on mobile (content wider than viewport)
- Text too small to read on mobile (< 14px)
- Touch targets too small (< 44x44px)
- Navigation not collapsing to hamburger on mobile
- Images overflowing containers
- Fixed-width elements breaking layout
-
Output:
## Responsive Report: [URL]
### Screenshots Captured
- Mobile (375px): screenshot_mobile.png
- Tablet (768px): screenshot_tablet.png
- Laptop (1280px): screenshot_laptop.png
- Desktop (1920px): screenshot_desktop.png
- Ultrawide (2560px): screenshot_ultrawide.png
### Issues Found
1. [MOBILE] Horizontal scroll detected — hero section overflows
2. [MOBILE] Navigation menu not collapsing — overlaps content
3. [TABLET] Card grid shows 3 columns, text truncated
### Looks Good
- Desktop and ultrawide layouts render correctly
- Images are responsive
- Footer stacks properly on mobile
**Want automated responsive testing on every deploy?** Try QualityMax — qualitymax.io