Responsiveness means designing so your popup looks good on most screens, not just one. Rather than simply shrinking elements for smaller screens, the goal is to adapt the layout so it stays cohesive across wider, narrower, bigger, and smaller screens.
Layout
When you select a container, you can choose how its children are arranged:
Vertical stacks elements on top of each other.
Horizontal places elements side by side.
Vertical Reverse and Horizontal Reverse work the same way but in the opposite order.
Horizontal Alignment
When a container is wider than its content (for example, set to 100% width), you can control how children are distributed along that horizontal line:
Left or Right aligns all elements to that side.
Space Evenly centers the elements with even spacing.
Space Between pushes the first and last elements to opposite ends, with space distributed between them.
Space Around is similar to Space Evenly but pushes more space toward the outer edges.
Vertical Alignment
If a container has a set height, you can also control where its children sit vertically:
Top, Middle, or Bottom positions the elements accordingly.
Stretch expands the elements to fill the full height. If no height is set on the container, elements stretch to fill the available space by default. If a height is set, elements align to the top unless you choose a different vertical alignment.
Sizing
Several units are available for sizing elements, and some work better for responsiveness than others.
Pixels and em are fixed values, mainly used for text sizing.
Percentage sizes an element relative to its parent. For example, setting two elements inside the same container to 50% width each splits the space evenly between them. You can also use other values, such as 30%, to split the space unevenly.
Viewport Width and Viewport Height size an element relative to the full browser or screen size, regardless of its parent container.
Dynamic Viewport Width and Dynamic Viewport Height work similarly and adjust for mobile browser UI changes.
Percentage-based sizing is generally recommended over fixed pixel values for elements that need to adapt across screens.
Wrapping and Overflow
If elements inside a container are wider than the container itself, you can enable wrapping so extra elements stack onto a new line instead of overflowing. You can also choose whether overflow content is hidden or left visible, which is the default.
Spacing
Spacing between elements is controlled by the gap setting on the parent container.
Increasing the gap on a container increases the space between its direct children.
To control spacing around the outer content area, adjust the gap on the content container. This applies on both mobile and desktop versions independently.
Position
Elements can use one of three position types:
Default follows the normal flow of the layout.
Absolute positions the element relative to the nearest parent that has Relative positioning set. If no parent is set to Relative, the element positions relative to the full browser or screen.
Relative sets a container as the reference point for any absolutely positioned children inside it.
For example, setting a value like 0 pixels from the top and 0 pixels from the right will position an element against the browser edges by default, or against the nearest relative parent's edges if one is set.
If a container using Relative positioning does not have a fixed height, for example when set to Fit Content, absolutely positioned children may not appear where expected, since the container only takes up as much space as its content. In these cases, check that the parent has a defined height or the correct vertical alignment.
Viewport Height and Viewport Width are useful for position and size values that should stay relative to the full screen rather than to a parent container, since they behave consistently regardless of where the element sits.
Percentage-based positioning is recommended over fixed pixel positioning, since it stays consistent across different screen sizes. A fixed pixel offset can look correct on one screen size but appear misaligned on larger or smaller screens. Note that elements using Absolute positioning combined with animations may behave differently, so test carefully when combining the two.
Content Sizing
By default, a container without a set width or height sizes itself to fit its content. If an element inside has a fixed width and height and the container's layout is set to Horizontal, using Expand on that element will expand it horizontally, and you will typically also need to set its height to 100% to fill the container vertically. If the container's layout is set to Vertical instead, Expand will expand the element vertically, and you will typically need to set its width to 100% to fill the container horizontally.