The red borders mark the safe zone area (you can toggle this with the button in left bar menu). On tall screens, the left and right side will be cut off. On wider screens, the top and bottom will be cut off. We have set the default safe zone sizes to 1100 x 700 pixels. You can also position a safe zone inside the workspace, when scaling down your screen you can see the effect. We have set the default positioning to 'center'.
To make a page fit all devices there is a technique called responsive design that can be used. All Maglr templates are based on this technique.
When you really want to create something creative in a 'free draw' designer tool it quickly gets very technical. For Maglr Pro we chose not to use a responsive technique but built something we thought is easier to understand and control for designers.
You start with a workspace, inside the workspace you create a safe zone. The safe zone is the area where all content is always visible. When the resolution of a screen is larger than the workspace, everything is still visible. When the screen resolution is smaller the content outside the safe zone is cut off.
The safe zone itself is always fully visible, on smaller screens we scale down the content to fit it to the screen. If we would use printing terms, the area between the safe zone and workspace is the page bleed.