How to preview different screen sizes in Webflow?

Previewing how your site looks across devices is essential before publishing. Webflow provides several built-in options for checking your design at different screen sizes, both inside the Designer and on the published site.

Using the breakpoint bar in the Designer

At the top of the Webflow Designer canvas, you'll see a row of device icons representing each breakpoint:

• Desktop (monitor icon) — 992px and above

• Tablet (tablet icon) — 768px to 991px

• Mobile landscape (phone sideways icon) — 480px to 767px

• Mobile portrait (phone icon) — 479px and below

Click any icon to switch the canvas to that breakpoint width. The canvas resizes to simulate the target device, and you can both preview and edit styles at that level.

When a breakpoint is active, any style changes you make apply only to that breakpoint and smaller ones in the cascade. Always check which icon is highlighted before making edits.

Dragging to a custom width

Next to the breakpoint icons is a draggable handle on the right edge of the canvas. Click and drag it to resize the canvas to any width between the breakpoints. This is useful for checking how your layout behaves at unusual widths — for example, around 800px where content might reflow awkwardly.

The breakpoint icons highlight based on which range your current canvas width falls into, so you always know which breakpoint's styles are active.

Preview mode

Click the eye icon in the top-left area of the Designer to enter Preview mode. This hides the Style panel and all editing tools, showing a clean preview of your site. You can still switch between breakpoints while in Preview mode.

Preview mode renders the site closer to how visitors see it — interactions work, links are clickable, and hover states respond. Use it to verify that animations and hover effects look right at each breakpoint.

The published site preview

Once your site is published (even to the staging subdomain), you can test it directly in a browser. This is the most accurate preview because it runs outside the Designer's iframe.

Use your browser's built-in responsive design mode:

• Chrome/Edge: Press F12, then click the device toggle icon (Ctrl+Shift+M)

• Firefox: Press F12, then click the responsive design icon (Ctrl+Shift+M)

• Safari: Enable the Develop menu in Preferences, then choose Enter Responsive Design Mode

These browser tools let you test at exact pixel widths and simulate real devices with accurate touch behavior, user agent strings, and device pixel ratios.

Sharing a preview link

Webflow generates a shareable read-only link for any project. In the Designer, click the share icon in the top bar to get a link you can send to clients or collaborators. They can view the site at any breakpoint without needing a Webflow account.

The share link reflects the latest saved state of your project — it doesn't require publishing. This makes it useful for getting feedback during the design process.