Skip to content
FUNNELSTREAMS

Websites · 2 min read

Device Width Preview in the Builder

Device Width Preview lets you type an exact pixel width for the builder canvas, so you can test how a page looks across the full range of a desktop, tablet, or mobile screen.

Good to know

  • It only changes the preview in the builder. It doesn't change your published page.
  • It doesn't create a new breakpoint. The device mode you pick (desktop, tablet, or mobile) still decides which styles you're editing.
  • The width resets when you reload the builder or open another page. It isn't saved.

Width ranges

| Device mode | Width you can enter | | --- | --- | | Desktop | 1025 to 3000 px | | Tablet | 768 to 1024 px | | Mobile | 320 to 767 px |
If you type a width outside the range for the current mode, you'll see a message under the field.

Preview a page at a custom width

  1. Click Sites in the left menu, then Funnels or Websites.
  2. Open the funnel or website and the step or page you want.
  3. Pick Desktop, Tablet, or Mobile in the device switcher.
  4. Find the Device Width field next to the device switcher and enter a width in the range for that mode. For tablet, that's 768 to 1024 px.
  5. Click Apply or press Enter.
  6. Review your sections, rows, columns, spacing, and content. If the canvas is wider than your screen, scroll sideways.
  7. Try more widths, or switch device mode to test another range.
  8. Use the reset option to go back to the default width. Resetting doesn't undo any style changes you made.

Set row and column widths for desktop and tablet

You can give rows and columns different widths on desktop and tablet.
  1. Open a funnel or website page in the builder.
  2. Choose Desktop or Tablet in the device switcher.
  3. Select a row and change its Width setting.
  4. In tablet view, drag the handle between columns to resize them.
Changes made in one view don't affect the other, so you can fine-tune each layout.

Tips

  • Test the edges of each range, such as 768 px and 1024 px for tablet. Layout problems usually show up there.
  • Check common laptop widths like 1280 px and 1440 px in desktop mode.

Did this answer your question?

No, I need help

More in Websites