Responsive design checker

This free tool loads any website in a preview frame and renders it at the real viewport dimensions of a phone, tablet, laptop, and desktop, with a portrait/landscape toggle. Instead of buying a shelf of devices or squinting at a single screen, you can flip between breakpoints in seconds and immediately see where a layout overflows, text shrinks too far, or buttons get cramped. A lightweight server-side check first confirms whether the site allows being embedded, so you're never left staring at a mysterious blank frame.

The majority of web traffic is now mobile, and Google uses mobile-first indexing - it ranks your site based on the mobile version, not the desktop one. A site that looks great on a 27-inch monitor but forces phone users to pinch, zoom, and scroll sideways loses both rankings and customers. Responsive design solves this with a single fluid layout that adapts to any screen, instead of separate sites or a fixed-width desktop layout that breaks on small screens.

The business case is blunt: if your most common visitor is on a phone and your site fights them, your conversion rate suffers no matter how good your offer is. Checking your responsive behavior is one of the fastest ways to find friction that's quietly costing you leads.

• Horizontal scrolling. Nothing should overflow the viewport on mobile - it's the most common responsive bug.
• Legible text. Body text should be at least 16px without zooming.
• Tap targets. Buttons and links need ~44x44px of space so fingers don't mis-tap.
• Navigation. The menu should collapse cleanly (usually to a hamburger) and stay usable.
• Images and media. They should scale within their container, not blow past it.
• Forms and CTAs. The primary action should be reachable and tappable without scrolling sideways.

If the preview reveals problems, the fixes follow a predictable order:

1. Add a viewport meta tag. <meta name="viewport" content="width=device-width, initial-scale=1"> - without it nothing else works.
2. Use a fluid layout. CSS flexbox or grid with relative units, not fixed pixel widths.
3. Add media queries at the breakpoints where the layout breaks.
4. Set legible base text (16px+) and comfortable tap targets.
5. Serve responsive images with srcset and modern formats.

If a site is built on a rigid, fixed-width theme, patching media queries can become an endless game of whack-a-mole - a modern, mobile-first rebuild is often faster and cheaper in the long run. For reference, see web.dev's responsive design basics.

Any tool that previews a live site in a frame depends on that site allowing embedding. Many sites - banks, big platforms, and security-conscious businesses - intentionally send X-Frame-Options or a Content-Security-Policy: frame-ancestors header to prevent it (a good defense against clickjacking). When that's the case, this tool detects it up front, tells you why, and points you to open the site in a new tab and use your browser's built-in responsive mode (press F12, then toggle the device toolbar). For your own site, you'll usually have full preview access.