~/frontend-tools/responsive-breakpoint-tester
Responsive Breakpoint Tester
Paste a page or component and see it at real device widths: phone, tablet, laptop and desktop, one at a time or side by side. Drag a custom width to find the exact point where a layout breaks, and read the active width as you go.
Your HTML
Many sites forbid being shown inside another page. If a URL stays blank, paste its HTML instead.
Using the Responsive Breakpoint Tester
Why test breakpoints
Layouts rarely break at the device sizes you test; they break in between. A three-column grid might look fine at 1280px and 768px and fall apart at 900px. Sweeping through widths with the custom slider finds those in-between failures before visitors do.
Real widths, real CSS
Each preview is a real browser frame at the chosen width, so media queries, container queries, viewport units and fluid clamp() sizes behave exactly as they will on a device of that width. The frame is scaled down only visually to fit your screen.
What it cannot show
Width is only one difference between devices. Touch input, the mobile address bar, font rendering and performance are not simulated. Finish with a check on a real phone, especially for forms and menus.
Testing a live site
You can also enter a URL. Many sites send headers that forbid being shown inside another page, so a blank frame usually means the site does not allow framing, not that something is broken. Pasting the HTML always works.
Frequently asked questions
Which widths are included?
360 and 390px phones, 768px tablet, 1024px small laptop, 1280px laptop and 1440px desktop, plus any custom width from 280 to 1920px.
Is my HTML uploaded?
No. The preview is built in your browser and runs in a sandboxed frame.
Can my scripts run in the preview?
Yes, scripts run inside the sandboxed frame so interactive components can be tested.