A Maglr Pro page knows two types of browser behaviour, which are used to set their response to different screen sizes. When you are creating a new Maglr Pro page in the dashboard you can choose between two types, which will be explained below:
Adapt to screen
This first option determines a fixed page size (and therefore fixed space of/between elements) to be displayed on a screen. When the screen gets bigger, the size of the page remains the same, displaying background color on the outsides of the page to fill the remaining white space. As the page gets smaller, the page will scale down to display all content inside the safe zone.
Scale to fit
These pages create a fixed canvas which scales in proportion to the viewer’s screen size, and the space surrounding the canvas will be filled with the default (background) color. As a result, all elements will grow bigger or smaller, as the entire canvas scales itself.
Although you have 4 different page types to choose from, in reality there are only two: fullscreen pages and longread pages. The other two options are made up of multiple fullscreen and/or longread pages, shown as one page using scenes. Click here to read more about scenes.
Landscape pages which will fill your screen and can’t be scrolled through. Mostly used to display imagery and small amounts of text, like a magazine cover.
Longer pages which can be vertically scrolled through. Used to display larger amounts of text, like an article.
Depending on the type of page you choose, you can set up the 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 screens the page will resize to fit the screen size. There are different ways objects can be positioned inside these resized screens.
Common aspect ratios
- 1024 x 578 (16:9)
- 1024 x 768 (4:3)
- 1020 x 850 (6:5)
- 1024 x 1024 (1:1)
- 1020 x 680 (3:2)
- 1024 x 512 (2:1)
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'. Click here to read more about the safe zone.