A responsive popup adapts its layout to the screen instead of shrinking everything down. Your popup has a mobile version and a desktop version, and the settings in this guide control how elements arrange, size, and position themselves within each one.
How the mobile and desktop versions work
Visitors whose browser window is 1024 pixels wide or wider see your desktop version. Anyone on a narrower screen sees the mobile version. A tablet held sideways can count as desktop.
Three things decide what each device shows:
Step content is shared between mobile and desktop. Adding, removing, or editing an element in a step changes it on both.
Templates are separate. Each step has a mobile template and a desktop template, which hold the frame around your content, such as the background and close button. A template change applies to that device only.
Styles can differ by device. When you style an element, choose All screen sizes to apply the style everywhere, or Desktop only to override it on desktop.
š”Note: If you resize your browser window, your popup switches between its mobile and desktop versions at 1024 pixels. That's expected.
Open the responsive settings
In the popup editor:
In the left sidebar, select Mobile or Desktop to choose the version you're editing.
Select an element on the canvas or in the left sidebar.
In the right sidebar, open Styles.
Choose All screen sizes or Desktop only.
The Layout, Size, and Position sections below are where most responsive changes happen.
Arrange elements with Layout
The Layout section appears when you select a container or a form. It controls how the elements inside it are arranged.
Direction
Vertical stacks elements on top of each other.
Horizontal places elements side by side.
The arrow icons next to them reverse the order: Vertical (reverse) and Horizontal (reverse).
Alignment
After you choose a direction, two alignment settings appear. Their names follow the direction you picked. With Horizontal, Horizontal align spaces elements along the row and Vertical align positions them up and down. With Vertical, it's the other way around.
The setting that follows your direction has these options:
Left or Right (Top or Bottom for vertical) groups elements at that end.
Center groups elements in the middle.
Space evenly puts the same amount of space between every element and at both ends.
Space between places the first and last elements at the edges, with equal space between the rest.
Space around gives each element equal space on both sides, so the space at the ends is half the space between elements.
The other alignment setting uses icons to place elements at the start, center, or end, or to stretch them. Stretch makes elements fill the container in that direction. An element with a fixed size in that direction keeps its size.
Spacing, wrap, and overflow
Spacing sets the space between the elements directly inside the container.
Wrap moves elements onto a new line when they don't fit side by side. No wrap keeps them on one line.
Overflow decides what happens to content that's bigger than the container. Visible lets it show outside the container. Hidden cuts it off.
Size elements so they adapt
The Size section sets an element's Width and Height. Each one has three options:
Auto lets the layout decide the size.
Fixed sets a size with a number and a unit.
Fit content sizes the element to whatever is inside it.
Choose a unit
When you set Width or Height to Fixed, a number field appears. To change the unit, select the unit at the end of the number field (for example, px) to open the unit menu. The unit decides how the element behaves on different screens.
% sizes the element relative to its parent. Two elements at 50% width split their container evenly.
vw and vh size the element relative to the full screen width or height, wherever it sits.
dvw and dvh work like vw and vh, but adjust when a mobile browser shows or hides its address bar.
px is a fixed size that stays the same on every screen.
em and rem scale with text size, and are mostly used for text.
For elements that need to adapt, use percentages instead of pixels.
Set limits with Min/max
Under each dimension, Min/max keeps an element from getting too small or too large. For example, a width of 90% with a max of 500 px fills small phones but stops growing on large screens.
Expand and Shrink
Expand makes an element fill the leftover space in its parent's direction. In a horizontal container, it grows sideways, so you'll usually also set its height to 100%. In a vertical container, it grows downward, so you'll usually set its width to 100%.
Shrink lets an element get smaller to make room for other elements.
Position elements
The Position section sets how an element is placed. Choose a Type:
Default follows the normal layout.
Absolute places the element using offsets from the top, right, bottom, or left edges. The edges belong to the nearest parent set to Relative, or to the screen if there isn't one.
Relative keeps the element in the normal layout, lets you nudge it with offsets, and makes it the reference point for any Absolute elements inside it.
For example, an Absolute close icon at 0 px from the top and 0 px from the right sits in the top-right corner of its Relative parent.
Percentage offsets stay consistent across screen sizes. A pixel offset can look right on one screen and misaligned on another.
š”Tip: Lia, Alia's built-in AI assistant, can change spacing, sizes, and layout on mobile and desktop separately or together. For example, ask Lia to "make the headline smaller on mobile only." See Getting started with Lia.
Best practices for responsive popups
Design mobile first: Most traffic is mobile, and step content you build there carries over to desktop. Then switch to desktop and adjust the template and any Desktop only styles.
Use percentages and Layout: Percent sizes, Layout alignment, and Spacing hold together better than fixed pixel positions.
Cap widths with Min/max: A percent width with a pixel max looks good on both phones and large screens.
Keep input text at 16 px or larger: On iPhones, smaller input text makes the page zoom in when a shopper taps the field.
Set animations under All screen sizes: That way they behave the same on both versions.
Test on both versions: Switch between Mobile and Desktop in the editor, then select Preview and resize your browser across 1024 pixels or open the preview on a phone.
Responsive popup FAQ
My popup changes when I resize my browser. Is something wrong?
No. Your popup shows its desktop version at 1024 pixels wide and above, and its mobile version below that. Resizing your browser across that width switches between them.
I changed something on mobile, and it didn't change on desktop. Why?
The change was probably in the mobile template, or the element has a Desktop only style that overrides it. Step content is shared between both versions, but templates and Desktop only styles aren't.
An element I positioned shows up in the wrong spot on some screens. What should I check?
Check these in order:
The element's parent is set to Relative. Otherwise, an Absolute element is placed against the screen edges.
The parent has a height. A parent set to Fit content may be smaller than you expect.
The offsets use percentages instead of pixels.
Why does a tablet show the desktop version?
The desktop version shows whenever the browser window is at least 1024 pixels wide, which includes many tablets held sideways.
Still have questions?
Start a chat from inside the Alia app, or use the chat in our Help Center. Fully Managed customers can also ask their Customer Success Manager.