Understanding the Safe Zone

Working with the Safe Zone

💭 Understanding the Safe Zone

The Safe Zone is the soft green area displayed on the left and right sides of the canvas.

This area will help you position elements and help to reduce the risk of your content being cut off at different breakpoints. It's built with the default project layouts in mind, so you may need to perform some additional troubleshooting if you plan on adding a custom breakpoint.

🖥 Working with the Safe Zone

When you build your content in the Design Editor, especially with elements, you'll need to position them to be inside of the Safe Zone to ensure nothing is cut off.

When you are building your content in the Design Editor, you will notice that placing an element outside of the Safe Zone results in that element being cut off as the user adjusts their browser width. However, by keeping elements placed inside of the Safe Zone it will ensure that nothing is cut off.

Did this answer your question?