Which screen sizes to check
Widths matter more than device names. Check sizes between your breakpoints too: layouts often break just before one takes over.
| Screen | Widths | Watch for |
|---|---|---|
| Small phone | 320 | WCAG’s reflow width: no sideways scrolling |
| Phone | 360–440 | Wrapped navigation, cramped buttons, long words |
| Tablet | 744–1024 | Awkward in-between columns; rotate to landscape too |
| Laptop | 1280–1536 | Short screens pushing the main action below the fold |
| Monitor | 1920 and up | Lines too long to read, stretched images, empty space |
What the common layout problems look like
TipFix overflow first: one element wider than the screen makes the whole page scroll sideways.
| Problem | What you see | Usual fix |
|---|---|---|
| Overflow | Sideways scrolling, cut-off cards and tables | max-width: 100% on media, min-width: 0 on flex and grid children, wrapping long words |
| Very small text | Text you have to zoom to read | Body text around 16px on phones |
| Small tap targets | Links and buttons too small or too close to tap | At least 24 × 24 CSS px (WCAG 2.2); 44 × 44 is easier |
Find overflow by hand in DevTools
In Chrome DevTools, press Ctrl+Shift+M (Cmd+Shift+M on Mac) for device mode and set a width. Then run this in the Console to list elements that stick out past the right edge.
Menus parked off-screen on purpose show up too; skip those.
const w = document.documentElement.clientWidth;
document.querySelectorAll('*').forEach(el => {
if (el.getBoundingClientRect().right > w) console.log(el);
});When to test on a real phone
Live previews use your browser at each exact width, so layouts follow the size, but the site still sees a desktop browser. Find layout problems opens the page as a real phone. Some things still need the device in your hand:
- Touch: swipes, sliders and menus that rely on hover
- The on-screen keyboard covering forms and fixed footers
- Browser bars that grow and shrink and change 100vh layouts
- Notches and rounded corners cutting into edge content
- Speed and smoothness on a mid-range phone