Designing for desktop and mobile

Your popup is one design, not two. The sections you add are the same on every screen, but you can fine-tune how they look on larger screens. Mobile is the base. Desktop sits on top of it as a set of overrides, so you only change what needs to change for wider screens. This lets you ship a clean single-column popup on phones and a polished two-column layout on computers, without rebuilding anything.

How the editor splits mobile and desktop

At the top of the center preview panel you have two buttons: Mobile and Desktop. The active one is filled in.

Mobile shows the popup at phone width.
Desktop shows it at the wider screen width and reveals the desktop-only controls.

Switching to Desktop is important. The desktop layout controls and the per-section override controls only appear in Desktop preview mode. If you stay in Mobile mode, you will not see any way to set up columns and may not realize the desktop options exist.

In Desktop mode you also get a small ⊞ Expand / ⊟ Collapse button next to the toggle. It hides the side panels so you can see a bigger preview, then brings them back.

How to set up a two-column desktop layout

Switch the preview to Desktop.
Open the Container panel using the button in the right-hand section panel header (next to Sections, Tracking, and A/B Tests).
Find the Desktop Layout section. Set Layout mode to Two columns (split). The default is Single column (stack).
Choose how wide the left column is. In Split ratio (left column %), type a whole number between 20 and 80. The default is 60, which gives the left column 60% of the width and the right column the rest. You can also drag the divider bar between the two columns in the preview to set this by eye.
Assign each section to a column. Open a section’s settings, find the Desktop Overrides panel at the top, and set Column to Left or Right. Left is the default.

That is the whole flow. The left and right labels never swap, so the left column is always on the left.

How to add a background image behind the columns

When Layout mode is set to Two columns (split), a Background image upload field appears. This image spans the full width behind both columns.

Upload or pick an image in Background image.
Set Background size. Your options are Original size, Fill (crop to fit), and Fit (no crop). The default here is Original size.
Set Background position using the 3x3 grid, from Top left through Bottom right. The default is Center.

These size and position controls only show up after you have set a background image.

How to hide a section on desktop

In Desktop preview mode, each section’s Desktop Overrides panel has a Hide on desktop checkbox. Tick it to drop that section from the desktop view. It still shows on mobile. This is useful when a section makes sense on a phone but clutters the wider layout, or the reverse.

If you have changed style settings for a section on desktop and want to undo them, use the ↩ Reset all to mobile values link in the same panel. This link only appears once you have actually changed a desktop style for that section. It clears your desktop style tweaks but keeps your Hide on desktop and Column choices.

Tips

Mobile always stacks. No matter what you set for desktop, mobile shows every visible section in one vertical column. Column choices and Hide on desktop have no effect on phones. So Hide on desktop does not hide a section on mobile.
Column and Hide on desktop only matter in split layout. In Single column (stack) mode, every visible section just stacks. Assigning a section to the Right column does nothing until you switch Layout mode to Two columns (split).
The percentage is the left column. Typing 30 makes the left column narrow (30%) and the right column wide (70%). Values stick between 20 and 80, so 90 or 10 get pulled back into range.
Split widens your popup. Choosing Two columns (split) automatically bumps the popup’s max width up to 700 if it was under 600, so the columns have room. If you set a deliberately narrow popup, expect it to jump wider, and that change stays.
An empty right column looks half-blank. In the editor, an unused right column shows the note “Assign sections here or add a background image”. On the live popup that column just renders empty. If you leave everything in the left column with no background image, desktop visitors see a lopsided, half-empty layout. Either move some content to the right or add a background image.
Original size may surprise you. The split background defaults to Original size, which does not scale the image to fill the space. If you expect a full background, switch Background size to Fill (crop to fit).

Frequently asked questions

Do I have to design mobile and desktop separately? No. There is one set of sections. Desktop is layered on top of your mobile design as overrides, so you only adjust what is different on wider screens.

Where is the breakpoint between mobile and desktop? Screens under 768 pixels wide get the single-column mobile view. Screens 768 pixels and wider get the desktop view, including your split layout if you set one.

I assigned a section to the right column but nothing changed. Why? Check two things. First, your Layout mode must be Two columns (split), not Single column (stack). Second, columns only apply on desktop, so you will not see the change on a phone-width preview.

Are the column and background settings per step or for the whole popup? The desktop layout mode, split ratio, and background image, size, and position all live in the Container panel, which you open while viewing a step. Column and Hide on desktop are set per section. If one step’s desktop layout looks different from another, open the Container panel while that step is showing in the preview and set its layout there.