Responsive safe zone (bleed)

The safe zone is the area of a scene that always stays visible on the published page, whatever the size of the visitor's screen. Pages don't reflow on smaller screens: each scene is scaled so its safe zone fits the screen. The area between the safe zone and the edge of the scene is the bleed, a term from print: it shows when the screen has room for it and is cropped when it doesn't.

Showing the safe zone in the editor

To show or hide the safe zone guide while you edit:

1. In the left bar, click Safe zone.

You can also turn the guide on or off through the options menu marked by an M: go to Editor preferences and click Show safezone.

By default, the area outside the safe zone is marked in red. You can change this color with Safe zone color in the General tab. The guide only appears in the editor and the preview. Hiding it doesn't switch off the safe zone, and visitors never see it on the published page.

Setting the safe zone size and position

To set the size and position of the safe zone for a scene:

1. In the right panel, open the General tab.
2. Under Scene size, next to Safe zone, enter the width in W. For a Fullscreen scene, also enter the height in H.
3. Click a point in the position picker to choose where the safe zone sits inside the scene.
4. Optional: change Safe zone color to change the color of the guide in the editor.

The safe zone can't be wider or taller than the scene itself.

A new blank scene starts with a safe zone of 1200 x 700 pixels, aligned to the top center. A scene added from a scene library, or a page created from a template, keeps the safe zone settings it was saved with.

In the desktop layout, on a Longpage scene, H is hidden and only the top row of the position picker can be used, because a Longpage scene only uses the safe zone width.

In the mobile layout, you can't enter the safe zone width: choosing a Preset under Scene size sets it to the scene width. The safe zone is always centered, and you can set its height in H only on a Fullscreen scene.

How the safe zone works on different screens

On the published page, the safe zone itself is always fully visible. On screens that are smaller than the safe zone, the scene is scaled down until the safe zone fits. How the bleed around it is cropped depends on the scene type:

• Fullscreen: both the safe zone width and height apply. When the screen can't show the whole scene, its shape decides what is cropped: on a screen that is proportionally taller than the safe zone, the left and right sides of the scene are cropped; on a screen that is proportionally wider, the top and bottom are cropped.
• Longpage: only the safe zone width applies, because the page scrolls vertically. Only the left and right sides of the scene are ever cropped. In the editor, the guide shows only the bands on the left and right.

When Zoom is selected under Scene type in the General tab, the scene is also enlarged to fill bigger screens. With Original fit, it is only scaled down, never enlarged. For more on scene types and scaling, see Page types & behaviour.

To check the result, open the preview, click Toggle safe zone, and resize the preview window or pick a different screen size.

Elements and the safe zone

How an element responds to the safe zone depends on its position type:

• An element with Free position moves and scales with the scene. If it sits outside the safe zone, it can be cropped on smaller screens, so keep important content inside the safe zone.
• An element with Screen border ignores the safe zone and stays at the edge of the visitor's screen.

For more on position types, see Element positioning.

Frequently asked questions

Why is part of my page cut off on some screens?

Content outside the safe zone is cropped when the visitor's screen has no room for it. In a Fullscreen scene, when the screen can't show the whole scene, the left and right sides are cropped on proportionally taller screens, and the top and bottom on proportionally wider screens. In a Longpage scene, only the left and right sides are cropped. Content inside the safe zone is always visible.

Does the safe zone show on my published page?

No. The colored safe zone guide only appears in the editor and in the preview. Visitors see the scene, scaled and cropped according to the safe zone, but not the guide itself.

Why can't I set the safe zone height?

The height field H is hidden on Longpage scenes. A Longpage scene scrolls vertically, so only the safe zone width is used. The height can only be set on a Fullscreen scene.

How do I keep an element at the edge of the screen?

Set the element's position type to Screen border. It then ignores the safe zone and stays at the edge of the visitor's screen. See Element positioning for details.

Updated on: 16/10/2026