Page behaviour

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 that 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.

Page types

Although you have 4 different page types to choose from, in reality, there are only two: fullscreen pages and longpages. The other two options are made up of multiple fullscreen and/or longpages, shown as one page using scenes. Click here to read more about scenes.

Fullscreen page

Landscape pages that will fill your screen and can’t be scrolled through. Mostly used to display images and small amounts of text, like a magazine cover.

Longpage

Long scrolling pages where you can adjust the page height. Used to display larger amounts of text and visuals, such as an article.

Page sizes

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 scale 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)

Safe Zone

The red borders mark the safe zone area (you can toggle this with the button in the left bar menu). On tall screens, both the left and right sides 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 'centre'. Click here to read more about the safe zone.

Updated on: 08/02/2023