Skip to main content

Understanding the Safe Zone

Making sure your content is visible across all breakpoints

Nina avatar
Written by Nina
Updated over 2 weeks ago

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.

The Safe Zone is the space on the canvas between the soft green areas displayed on the left and right sides of the canvas. You will notice this when viewing your project inside the design editor.

When you build your content in the Design Editor, especially with elements, you'll need to position them inside the Safe Zone to ensure nothing is cut off. Placing an element outside of the Safe Zone runs the risk of elements being cut off on some viewports.

Safe zones are also a helpful visual guide to indicate the minimum size for a particular breakpoint. For example, on the canvas, we're currently in the desktop viewport. If we adjust the viewport width by dragging the handle outside the canvas and shrink it, once the width drops below 1024px, the layout will switch to the next breakpoint. In this case, the next breakpoint is the tablet view.

You can see this change reflected at the top-left of the canvas, where the breakpoint label updates, and a new safe zone appears. If we reduce the size even further, dropping below 600px will switch the layout to the mobile breakpoint.

It’s important to test different viewport when designing in Vev to ensure that your project looks great across a variety of different screen sizes.

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.

Did this answer your question?