How to use the Responsive Design Tester
- 1. Enter a URL or HTMLType an https address, or paste HTML you are working on.
- 2. Show all sizesThe page loads in five frames from 375px to 1440px wide.
- 3. Scroll and compareScroll sideways to compare layouts and spot problems.
How it works, and one honest limit
Each device frame is a real browser frame set to that screen's CSS width: 375, 414, 768, 1280 and 1440px. It is scaled down so they fit side by side, so media queries fire exactly as they would on those screens.
Limit: many websites, including most big brands and banks, tell browsers not to show them inside another site, using X-Frame-Options or Content-Security-Policy headers. Those frames will stay blank or show "refused to connect". That is the website's security choice, and no online tester can get around it without a server copying the page. For those sites, use your browser's device toolbar (F12 → toggle device), or paste your own HTML here.
Worked example: pasted HTML
Switch to Paste HTML and use the sample: a heading and three boxes in a grid with repeat(auto-fit, minmax(200px, 1fr)). At 375px and 414px the boxes stack in one column. At 768px they fit three across, because 3 × 200px plus gaps fits in 768px. At laptop and desktop widths they stretch wider. You can check the same thing for any layout you are building.
Things to look for in each frame:
- Horizontal scrolling or content cut off at the side.
- Text too small to read or buttons too close to tap.
- Images stretched or overflowing their containers.
- Navigation that doesn't fit, which is a sign you need a mobile menu.
Frequently asked questions
Why is the frame blank for some websites?
Those sites block being shown inside other pages. It is their security setting; try your own pages or pasted HTML instead.
Why do I need https?
Browsers block plain http pages inside https pages (mixed content).
Is it the same as a real phone?
The layout is the same, but touch, fonts and browser bars can differ. Test on a real device before launch.
Is it free?
Yes. Showing your first set of sizes asks for your name and WhatsApp number once, and then all Uncodemy tools are open.