Skip to content
Elooo SystemHelp Center Go to website

Funnels and websites

How to review and adjust the mobile and tablet version of a page

In the builder, use the device switcher (desktop, tablet, mobile) to view and edit each version, and enter a pixel width in Device Width to test other screen sizes. Changes made in mobile mode (e.g. an image size) apply to mobile only.

Updated on

Before you start

  • Have the page created in a funnel or website and open in the builder.
  • Build the desktop version first. Tablet and mobile inherit from it until you customize them.
  • Keep a phone handy to check at the end: the preview helps, but the real test is on the device.
Where to find it

Sites › Funnels or Websites › (open the page) › Edit › device switcher (Desktop / Tablet / Mobile)

Step by step

View the page on each device

  1. Open Sites, choose Funnels or Websites and click Edit on the page.
  2. In the builder bar, click the device switcher and choose Desktop, Tablet or Mobile. The selected mode sets which version you're viewing and editing.
  3. To test a specific size, type a pixel width into the Device Width field next to the switcher. Each mode accepts a range: desktop 1025 to 3000 px, tablet 768 to 1024 px, mobile 320 to 767 px.
  4. Click Apply or press Enter. The canvas changes to that width; if it's wider than your screen, scroll horizontally.
  5. Review sections, rows, columns, text and spacing at that width. Repeat with other widths or another mode.
  6. Use the reset option to return to the mode's default width.

Resize an image for mobile only

  1. Switch to Mobile mode.
  2. Click the image to open its settings.
  3. Under Height and Width, enter the values and choose the unit: px (fixed), % (relative to available space) or rem/em (relative to text size). You can mix units, for example height in px and width in %.
  4. Save. These values apply to mobile only; the desktop version keeps its own.
  5. Click Preview and check both modes.

Adjust rows and columns on tablet

  1. Switch to Tablet mode.
  2. Select the row and adjust its Width.
  3. To redistribute adjacent columns, drag the handle between them.
  4. Switch back to Desktop to confirm nothing changed there, then save.

Tips

  • The width you type into Device Width is preview only: it doesn't create a new breakpoint, isn't saved and doesn't change the published page. Reloading the builder resets it.
  • On mobile, rows always span the full width and columns stack on top of each other; the row width control is hidden.
  • Tablet inherits desktop widths. To restore inheritance after customizing, set the tablet row width to the same value as desktop.
  • If you don't set mobile dimensions, the image uses the desktop ones, which are usually too large for small screens.

Common problems

  • The width field rejects my value → It's outside the range for the selected mode. Switch modes (e.g. to tablet) or enter a value within the range.
  • I resized on mobile and desktop changed too → Make sure the switcher was on Mobile before editing. Changes apply to whichever mode is selected.
  • The image is still huge on mobile → It has no mobile-specific dimensions yet. In Mobile mode, set the width in % (e.g. 100%) so it follows the screen.
  • Columns are too narrow on tablet → In Tablet mode, drag the handle between columns or adjust the row width. This doesn't affect the desktop version.
  • It looks different on a real phone than in the preview → Publish the page and open the address on your phone; if you used several widths on the same page, check each section in Mobile mode.

Was this helpful?