ToolsForcebeta

$ run --tool

Responsive Breakpoint Preview

Preview any URL across 7 device breakpoints — mobile to desktop — with zoom, orientation toggle, compare-all view, and framework reference.

Breakpoint
Framework
Zoom
Custom size
×
Orientation
View
375 × 667 pxdefault (<sm)Mobile60% zoom
Mobile
default (<sm)
50
100
150
200
250
300
350
375

Enter a URL to preview

375 × 667 px — default (<sm)

Tailwind CSS Breakpoint Reference

DeviceWidthBreakpointActive
Mobile S
320pxdefault (<sm)
Mobile
375pxdefault (<sm)● current
Mobile L
425pxsm (≥640px)
Tablet
768pxmd (≥768px)
Laptop
1024pxlg (≥1024px)
Desktop
1280pxxl (≥1280px)
Desktop L
1440px2xl (≥1536px)

Features

  • ✓7 preset breakpoints: 320, 375, 425, 768, 1024, 1280, 1440px
  • ✓Compare-all view — every breakpoint rendered side by side
  • ✓Tailwind CSS, Bootstrap and MUI breakpoint reference built in
  • ✓Portrait / landscape orientation toggle
  • ✓Custom width × height input
  • ✓Zoom levels from 25% to 100%
  • ✓Pixel ruler on the preview frame
  • ✓Breakpoint reference table — click any row to jump to that size
  • ✓Copy current size to clipboard

How to use

  1. 1Enter any public URL in the address bar and click Preview
  2. 2Select a breakpoint pill — Mobile S (320px) through Desktop L (1440px)
  3. 3Switch the Framework selector to see Tailwind, Bootstrap or MUI breakpoint labels
  4. 4Toggle orientation for landscape mode, or enter a custom width × height
  5. 5Click Compare all to see every breakpoint simultaneously — click a panel to inspect it

Frequently asked questions

Why doesn't the preview load some websites?+

Many sites set X-Frame-Options or Content-Security-Policy headers that block embedding in iframes. This is a browser-level security restriction — the tool cannot work around it for those sites.

Which frameworks' breakpoints are shown?+

Tailwind CSS (sm/md/lg/xl/2xl), Bootstrap 5 (xs/sm/md/lg/xl/xxl), and MUI / Material UI (xs/sm/md/lg/xl). Switch the Framework dropdown to compare.

Can I test my localhost?+

Yes — type http://localhost:3000 (or your local port) directly in the URL bar. The preview loads it in an iframe inside the same browser.

What does the zoom control do?+

It scales the iframe display so you can see larger breakpoints (e.g. 1440px) within the tool's panel. The actual viewport fed to the website stays at the selected pixel width.

Related tools

html

HTML Preview

Paste raw HTML and see a live, sandboxed render instantly.

html

Code Screenshot Beautifier

Turn code and HTML snippets into beautiful, customizable presentation-ready screenshots with custom backgrounds, window styles, and syntax highlighting themes.

Need a tool that isn't here yet?

ToolsForce is growing every week. Tell us what to build next.

Request a tool