The Safe Zone ensures that your content remains visible across all screen sizes and breakpoints. It is the central area of the canvas, located between the soft green margins shown on the left and right sides.
Why the Safe Zone Matters
Keeps text, images, and elements from being cut off when the browser width changes.
Provides a consistent viewing experience across devices.
Works best with Vev’s default project layouts. If you add a custom breakpoint, additional adjustments may be required.
Working with the Safe Zone
When designing in the Vev Design Editor:
Place all key elements inside the Safe Zone.
Example: Headlines, buttons, and important visuals should remain within the green area.
Avoid placing elements outside the Safe Zone.
Elements positioned outside may be hidden or truncated on smaller screens.
Working with the Safe Zone
While creating content in the Design Editor, particularly when working with elements, it's important to place them within the Safe Zone to ensure they aren’t clipped or hidden.
As you design your content in the Design Editor, you’ll notice that placing elements outside the Safe Zone can cause them to be cut off when the browser width changes. To prevent this, make sure all elements remain within the Safe Zone.
Example
Inside Safe Zone: A call-to-action button remains fully visible as the browser width changes.
Outside Safe Zone: The same button might be cut off on smaller devices.