# Check a site on every screen size

> See a website on phones, tablets, laptops and monitors side by side, free. Find overflow, tiny text and small tap targets, then test real devices.

Canonical page: https://sitepeel.dev/guides/check-website-on-every-screen-size/

Paste the link into a free responsive checker to see phones, tablets, laptops and monitors side by side, then let it outline layout problems.

Published: 2026-10-24

Tool used in this guide: [Responsive viewer](https://sitepeel.dev/responsive-website-viewer/index.md)

## How to use it

1. **Paste the link** Paste your page’s link into the free responsive checker to see it on every device side by side.
2. **Pick your devices** Press Devices to choose up to 12 phones, tablets, laptops and monitors, or add a custom size like 1280x800.
3. **Find layout problems** Press Find layout problems. It outlines content wider than the screen, very small text and small tap targets.
4. **Step through each screen** Click a device to focus it, step with the ← and → keys, press Esc to go back, and Rotate for landscape.

## 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.

Width ranges to cover, in CSS pixels

| 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

Layout problems and the usual fix

| 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 |

- [Fix sideways scrolling on mobile](https://sitepeel.dev/guides/fix-horizontal-scroll-mobile/index.md)

## 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.

Example: find-overflow.js

```
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

- [Compare layouts in Chrome with the Responsive viewer](https://sitepeel.dev/responsive-website-viewer/index.md)

## Questions and answers

### How do I test my website on different screen sizes for free?

Paste its link into a free online responsive checker to see many devices at once, or use Chrome DevTools device mode (Ctrl+Shift+M) one size at a time. Check a real phone before launch.

### Why does the preview look different from my phone?

Previews match the width, but the site still sees a desktop browser, so phone-only code, touch and browser bars aren’t tested. Sites that block being shown inside other pages get screenshots at each size instead.

### What screen sizes should I test?

Cover 320 and 360–440 px for phones, about 744–1024 px for tablets, 1280–1536 px for laptops and 1920 px for monitors. Try sizes between your breakpoints too, where layouts often break.

### Why is my website wider than the phone screen?

One element is wider than the screen: often a fixed-width image, table or embed, a long word or link, or a flex child that won’t shrink. Find it, then use max-width: 100%, min-width: 0 or overflow-wrap: anywhere.

## Further reading

- [W3C: Understanding Target Size (Minimum), WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
- [W3C: Understanding Reflow, WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)
- [Chrome DevTools: device mode](https://developer.chrome.com/docs/devtools/device-mode)

## Related pages

- [Test responsive layouts](https://sitepeel.dev/guides/test-responsive-website-layouts/index.md): Test a responsive website at phone, tablet and desktop widths. Find where the layout breaks, check hard content, record the bug and verify on devices.
- [Responsive website testing](https://sitepeel.dev/guides/responsive-website-testing-checklist/index.md): Test responsive layouts, menus, forms, long content and zoom with a practical checklist, a read-only overflow finder and a bug-report template.
- [Fix mobile horizontal scroll](https://sitepeel.dev/guides/fix-horizontal-scroll-mobile/index.md): Find the element that makes your mobile site scroll sideways, fix the CSS cause and retest. Includes a console snippet and a table of common fixes.
- [Responsive viewer](https://sitepeel.dev/responsive-website-viewer/index.md): Preview a website at phone, tablet, foldable and desktop sizes. Compare layouts, drag devices, adjust scale and capture references with Sitepeel.