To make a page fit to all devices there 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 safezone. The safezone 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 safezone is cut off.
The safezone 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 safezone and workspace is the page 'bleed'.
Depending on the type of page you choose you can set a page size. It’s important to start a publication with the right dimensions so it will look good on every screen. Our default setup size is: 1280 x 760 pixels. On smaller or larger screens the page will resize to fit the set size. There are different ways objects can be positioned inside resized screens. We wil explain more about that later on, on page: Pro - Choose your page type
The red borders mark the safezone 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 safezone sizes to 1100 x 700 pixels. You can also position a safezone inside the workspace, when scaling down your screen you can see the effect. We have set the default positioning to 'center'.