Can I test external URLs with this tool?

No — loading external URLs in an iframe is blocked by browsers for security reasons (same-origin policy and X-Frame-Options). Instead, paste the HTML source of the page you want to test. In Chrome or Firefox, open the page, press Ctrl+U (or Cmd+U on Mac) to view source, select all, and paste it here.

What breakpoints are included by default?

The tool includes 8 preset breakpoints: Mobile — 320px (iPhone SE 1st gen), 375px (iPhone 14 / SE 3rd gen), 414px (iPhone 14 Plus); Tablet — 768px (iPad Mini), 1024px (iPad Pro 11"); Desktop — 1280px (Laptop), 1440px (Desktop HD), 1920px (Full HD).

How do I add a custom breakpoint width?

Enter one or more widths (in pixels) in the Custom Widths field, separated by commas (e.g. 480, 960, 1600). Click Add or press Enter to add them to the preview. Custom widths accept plain numbers or numbers with a 'px' suffix.

Why does the preview look scaled down?

Each preview panel has a fixed display width of 300px. To show how content looks at wider breakpoints (like 1920px) in a compact card, the tool applies a CSS transform scale. The percentage shown in the footer of each panel indicates the current scale factor (e.g. 15% means the 1920px layout is scaled to fit a 300px-wide card).

Does pasted HTML support CSS and JavaScript?

Yes. HTML pasted into the tool is rendered inside an iframe with sandbox='allow-scripts allow-same-origin', so inline CSS and JavaScript within the pasted HTML will execute. External resources (CDN links, Google Fonts, etc.) will also load as long as you are connected to the internet.

Responsive Breakpoint Tester Online — Preview HTML at Any Screen Size

You’re building a responsive layout and need to see how it looks at 375px (iPhone SE), 768px (iPad), and 1440px (laptop) — simultaneously, side by side. Chrome DevTools shows one viewport at a time, so you’re constantly resizing. You want to paste your HTML and see all three breakpoints at once.

Why This Tester (Not Chrome DevTools)

Chrome DevTools’ device toolbar shows one viewport at a time and requires manual resizing. This tool shows your HTML at multiple breakpoints simultaneously — mobile, tablet, and desktop side by side. You can also add custom widths for non-standard breakpoints. Paste HTML and see all viewports at once, in your browser.

What Is a Responsive Breakpoint Tester?

A responsive breakpoint tester is a developer tool that lets you preview HTML and CSS at multiple viewport widths simultaneously — without resizing your browser window or switching between device emulation modes. Paste your HTML, select the breakpoints you care about, and instantly see side-by-side previews of how your layout responds at every screen size.

This tool renders each preview in an isolated iframe at the exact pixel width of the breakpoint, then scales it down to fit a compact card. You see the real layout, not a simulation.

Standard CSS Breakpoints Reference

These are the industry-standard breakpoints included in the tool, based on actual device widths and the Tailwind CSS / Bootstrap breakpoint systems:

Mobile Breakpoints

Width	Device	Notes
320px	iPhone SE (1st generation)	Smallest widely-used iOS screen
375px	iPhone 14, iPhone SE (3rd gen)	Most common iOS device width
414px	iPhone 14 Plus, 11 Pro Max	Larger iPhone Plus/Max sizes

Mobile breakpoints (under 768px) are the most critical — Google uses mobile-first indexing, so your layout must work perfectly at 320px and 375px before anything else.

Tablet Breakpoints

Width	Device	Notes
768px	iPad Mini, iPad (portrait)	Most common tablet portrait width
1024px	iPad Pro 11” (landscape), iPad	Tablet landscape / small laptop

The 768px breakpoint is historically significant — it is the md breakpoint in Tailwind CSS and the @tablet breakpoint in many design systems. Most CSS frameworks switch from a stacked mobile layout to a multi-column layout at this point.

Desktop Breakpoints

Width	Device	Notes
1280px	Laptop (13–15”)	Common laptop screen width
1440px	Desktop HD monitor	Popular MacBook Pro Retina width
1920px	Full HD monitor	Standard 1080p desktop display

For desktop, 1280px is the minimum you should test, since many users are on laptops with smaller screen resolutions. 1440px and 1920px cover the majority of non-mobile users.

Tailwind CSS Breakpoints

If you use Tailwind CSS, its breakpoints map to these widths:

/* Tailwind CSS v3/v4 default breakpoints */
sm:   640px   /* Small devices */
md:   768px   /* Medium — tablet portrait */
lg:   1024px  /* Large — tablet landscape */
xl:   1280px  /* Extra large — laptop */
2xl:  1536px  /* 2x large — large desktop */

The most common responsive patterns in Tailwind:

grid-cols-1 md:grid-cols-2 lg:grid-cols-3 — stack on mobile, 2-col on tablet, 3-col on desktop
hidden md:block — hide on mobile, show on tablet+
text-sm md:text-base xl:text-lg — scale typography up with viewport

Bootstrap Breakpoints

Bootstrap 5’s breakpoint system:

xs: 0px        /* Extra small (default, no prefix) */
sm: 576px      /* Small */
md: 768px      /* Medium */
lg: 992px      /* Large */
xl: 1200px     /* Extra large */
xxl: 1400px    /* XX-Large */

Bootstrap’s container max-widths also define useful test points: 540px (sm), 720px (md), 960px (lg), 1140px (xl), 1320px (xxl).

How to Test a Live Website

Since browsers block loading external URLs in iframes (same-origin policy), the tool works with pasted HTML source. Here is how to get your page’s HTML:

From Chrome / Firefox / Edge:

Open the page you want to test
Press Ctrl+U (Windows/Linux) or Cmd+Option+U (Mac) to view source
Select all (Ctrl+A / Cmd+A) and copy (Ctrl+C / Cmd+C)
Paste into the tool’s input area

From browser DevTools:

Open DevTools (F12 or Ctrl+Shift+I)
In the Elements panel, right-click the <html> element
Choose “Copy → Copy outerHTML”
Paste into the tool

Note: the copied HTML includes the DOM as-built, including any JavaScript-rendered content. External CSS files and JavaScript linked by <link> and <script src> tags will load if you are connected to the internet.

Common Responsive Design Issues

Testing across breakpoints helps catch these frequent layout problems:

Text Overflow and Clipping

Long strings (URLs, technical terms, file paths) often overflow their containers on narrow viewports. Check for overflow: visible on flex/grid children at 320px. Fix with overflow-wrap: break-word or word-break: break-all on text containers.

Fixed-Width Elements

Elements with hardcoded width: 600px or similar values create horizontal scrollbars on mobile. Replace with max-width: 600px; width: 100%.

Tap Target Sizes

On touch devices, buttons and links must be at least 44×44px to be reliably tappable. Check that interactive elements have sufficient padding on the 320px and 375px previews.

Desktop navigation bars often overflow on mobile. Test your hamburger menu toggle or hidden navigation at 320px. A nav that works at 375px may still break at 320px.

Image Scaling

Images without max-width: 100% overflow their containers. SVGs with hardcoded width and height attributes may not scale. Add img, svg { max-width: 100%; height: auto; } to your reset styles.

Font Size Legibility

The minimum readable font size is 16px (base body text). Test at 320px to ensure paragraph text is not smaller than 14px. Use clamp() for fluid typography:

/* Fluid type: min 14px, max 18px, scales with viewport */
font-size: clamp(0.875rem, 2.5vw, 1.125rem);

Responsive Design Best Practices

Mobile-First CSS

Write your base styles for the smallest screen, then add @media (min-width: ...) rules for larger viewports:

/* Base: mobile */
.container { padding: 16px; }
.grid { grid-template-columns: 1fr; }

/* Tablet+ */
@media (min-width: 768px) {
  .container { padding: 24px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1280px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

CSS Custom Properties for Spacing

Define spacing tokens that scale with the viewport:

:root {
  --spacing-container: 16px;
  --spacing-section: 32px;
}
@media (min-width: 768px) {
  :root {
    --spacing-container: 24px;
    --spacing-section: 64px;
  }
}

Viewport Meta Tag

Always include the viewport meta tag — without it, mobile browsers render at ~980px and scale down, making your responsive CSS useless:

<meta name="viewport" content="width=device-width, initial-scale=1">

This tool automatically injects this tag when you paste a plain HTML snippet (not a full document), so your snippets always behave correctly.

Frequently Asked Questions

Why can’t I load a URL directly? Browsers enforce the same-origin policy and respect the X-Frame-Options and Content-Security-Policy headers that most sites set to prevent being embedded in iframes. Copy the HTML source instead — see the “How to Test a Live Website” section above.

Does JavaScript in my pasted HTML run? Yes. The iframe uses sandbox="allow-scripts allow-same-origin", so inline <script> tags and event handlers execute. External scripts linked via <script src="..."> also load if the URL is reachable.

How accurate is the scale-to-fit preview? The preview is pixel-accurate — the iframe renders at the exact breakpoint width, and a CSS transform: scale() shrinks it to fit the 300px-wide card. The actual CSS breakpoints, grid layouts, and media queries behave identically to a real browser at that viewport width. The only difference is that scroll behavior and hover effects may be constrained.

Can I add a 576px breakpoint for Bootstrap’s sm? Yes. Type 576 in the Custom Widths field and click Add. You can add any width between 240px and 3840px.

Why is the 1920px preview so small? A 1920px-wide layout scaled to fit a 300px card results in approximately 15% scale. This is intentional — it gives you a bird’s-eye view of the desktop layout structure. To see finer details at 1920px, use your browser’s built-in responsive design mode (F12 → toggle device toolbar in Chrome/Firefox/Edge).

Is my HTML content private? All processing happens entirely in your browser. Your HTML, CSS, and JavaScript are never sent to any server. The tool works fully offline once loaded.

Responsive Breakpoint Tester

Breakpoints

Preview3 viewports