Responsive Properties (Legacy)

Enable responsive page rendering engine

The page can either use the responsive rendering engine or a traditional fixed-width, centered layout. Control this at the page level. Check this box if you want the page to be responsive.

Make this element fixed-width

Check this box if you want the element to remain a fixed dimension when the page is resized. This is equivalent to having a fixed-width page if it is applied to the page element.

Minimum width (% of current width)

When the page narrows, the rendering engine narrows the elements accordingly. To set a minimum width, define it here. It should be lower than 100%.

Apply a max width when the page is stretched

If you want to limit an element's maximum size when the page is stretched, check this box.

Maximum width (% of current width)

When the page widens, the rendering engine widens the elements accordingly. To set a maximum width, define it here. It should be higher than 100%.

Note: Images cropped to fit current cell width in a Repeating Group that is set to expand past 100% of current width may appear squished on first page load.

Collapse margins when container width ≤

If the element's container's width, in many cases the page, is squeezed below this number, the left and right margins will collapse, and this element becomes flush against the edges of the page. This is useful on mobile devices when a full-width image looks better.

When you have a left-aligned fixed margin, that margin will be preserved even when the container width shrinks and the right margin collapses. The same behavior is true of a right-aligned margin, only vice versa. The center-aligned margins will both collapse.

Tip: This setting is not currently available for elements within a repeating group.

Fixed margin

Choose whether the element preserves the left or right margin when the user resizes the window or accesses the app from a phone. If center is selected, then both margins will stretch or shrink, keeping the element centered relative to its neighbors. Note: This applies to the first element in the given box, not the selected element.

Wrap to previous line if the page is stretched

Check this box if you want the elements on a given line to be moved up to the previous line when the page is stretched. Note: This applies to the first element in the given box, not the selected element.

Keep element proportions

Check this box if you want the height to change according to the width, keeping proportions. This is especially useful for maps and images.

Add hiding rule

Click this box to enter a threshold to determine when to hide an element. Select either > or <= and enter a number. If the screen crosses this threshold, the element will be hidden.

Debug mode

When this mode is activated, the different boxes and lines on the page are shown. Elements are in boxes, and boxes are gathered by lines. This helps to understand the responsive behavior of the page.

Paused rendering mode

When this mode is activated, the responsive engine will not react when you modify elements' responsive properties, which can help with complex pages. Un-checking the setting will trigger a new rendering.