Scaling behaviour

When creating a new Maglr Pro page, you can choose between two types of browser scaling behaviour:

Adapt to screen

The "adapt to screen" option sets the page to a fixed size. That means the space of (and between) element is also fixed. When the browser window gets bigger, the size of your page remains the same. The additional space is filled with your set background colour. As the window gets smaller, the page also scales down to display all content inside the safe zone.

Scale to fit

A "scale to fit" page scales elements in proportion to the viewer's screen size. Additional space will be filled with the default background colour. What you will notice is that all elements grow bigger or smaller as the canvas is resized. This is a good option if have a design where it is essential for elements to remain proportional to each other.

Page types

Maglr contains two blank "base" types for pages: fullscreen and longpage. The four options you can choose from are either one or a combination of these types tied together as scenes.

Fullscreen page

A landscape page that fills fullscreen and can’t be scrolled through. Mostly used to display images and small amounts of text, for example a magazine cover.

Longpage

Long pages that are adjustable in height. The content can be scrolled through vertically. Suitable for larger amounts of content, such as an article.

Page sizes

Depending on the page type, 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. The page will scale down on smaller devices, ensuring elements remain visible.

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 the visibility of the safe zone on and off 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 set the position of the safe zone from within the editor. We have the default positioning set to 'center'. Click here to read more about the safe zone.

Updated on: 24/10/2024