One of the most important aspects when designing for the web is positioning. If you position and size your elements properly, adjustments for tablet and mobile will be a lot easier. Mastering positioning of elements is key to creating stories and websites that are pixel perfect and consistent on all devices and browsers.
When you add a widget to a section, the widget is added as a layer to the section you are currently drawing it in. This is demonstrated through the Layers panel and with a line from the top left corner of the widget and the section origin.
Container: Canvas Safe Zone
The blue dashed lines near the left and right edges of the canvas represent the Safe Zone, also called Container. Content placed inside these lines will be visible to all users on the said device. If you move content outside of the container, you'll notice the outer edges turning red, indicating that some content may not be fully visible to all viewers on that specific device.
On desktop, the safe zone equals an 11-inch screen. Parts of the image below will not be visible on small screen sizes. On larger screens, the image is fully visible; therefore, we allow you to put content outside of the container but give you a warning of where content will be cut off on small screen sizes.
|Device Mode||Hotkey||Container Width|
Read more about how you can safely place content outside of the container using Pinned Elements.
Read the articles listed below to learn what you need to know when designing for the web: