What to consider when building a mobile design

Every scene in the Maglr editor has a Desktop layout and a Mobile layout. You build the desktop design first, then place its elements on mobile and adapt them for smaller screens. This article covers what to plan for, how the two layouts are linked, and how to adjust the mobile scene.

Planning for mobile while designing desktop

Design the desktop layout first, but plan for mobile while you do it. Maglr works desktop-first: you build the mobile design mainly by placing elements from your desktop design, so plan how each element you add on desktop will look on mobile.

A phone screen is much smaller than a desktop screen, so the same design rarely fits both as it is. While you sketch the desktop design, decide how large elements and long blocks of information will fit on a narrow screen. The mobile scene width is set by a preset (Small, Medium or Large) rather than a free value.

If you don't build a mobile design for a scene and its Mobile layout stays empty, visitors on a phone are asked to rotate their device and see the desktop design scaled down to fit.

Adding desktop elements to the mobile design

The Element library panel appears only in the Mobile layout. It lists the elements (layers) of your desktop design, so you can place them on the mobile canvas. It lists all scenes, with the current scene already open; click another scene to see its desktop layers. You can search it, move it, collapse it, and hover a layer to see a preview.

To add a desktop element to the mobile design:

1. In the left bar, click Mobile.
2. In the Element library panel, the layers of the current scene are already listed. If the element is in another scene, click that scene.
3. Find the layer in the list, or type its name in the search field.
4. Drag the layer onto the mobile canvas.
5. Adjust its position, size or styling for mobile. These changes don't affect the desktop design.

Mobile changes and the desktop design

Changes you make in the Mobile layout never overwrite your desktop design. An element placed on mobile is the same element as on desktop, shown in a second layout, not a copy. This is how the two layouts relate:

• Starting point: a placed element starts with its desktop position, size and styling.
• Position, size and style: changes you make on Mobile apply to mobile only. The desktop design stays unchanged.
• Desktop changes: style changes you make on desktop carry over to mobile, unless you have already changed that same setting on mobile. Moving or resizing an element on desktop doesn't change its position or size on mobile.
• Deleting: deleting an element in the Mobile layout removes it from mobile only. It stays on desktop.
• Content: images, videos, audio, embeds, charts, forms and slideshows are managed on desktop. You can't change their content in the Mobile layout. For example, you'll see "The chart data can only be edited on desktop." or "The form can only be edited on desktop."
• Text: you can edit text in the Mobile layout, but that detaches the element's mobile text from desktop. Later text edits on desktop no longer appear on mobile.

To bring detached text back in line with desktop, select the element in the Mobile layout and click Reset in the "Reset element" bar ("Reset this element back to the desktop version.").

Adapting interactions for mobile

Animations and interactions designed for desktop don't always suit a phone. In the Mobile layout, review each animation and interaction for a small screen, touch input and accessibility.

Hover effects and hover actions don't work on mobile devices, because there is no mouse pointer. Don't rely on hover to show information in your mobile design.

Changing the scene height

You can set the height of a scene in pixels, or drag it on the canvas for Longpage scenes. The height is set separately for Desktop and Mobile, so a mobile design can be longer or shorter than the desktop one.

To set an exact height:

1. In the left bar, click the layout you want to change: Desktop or Mobile.
2. In the right panel, open the General tab.
3. Under Scene size, enter the height in pixels in the H field next to W.

To change the height by dragging, drag the handle at the bottom of the canvas up or down. The handle is available only for Longpage scenes. In the Mobile layout, it also shows when the desktop scene is a Longpage scene. For other scenes, use the H field.

In a Longpage scene, when an element extends past the bottom of the canvas, the editor extends the scene height automatically and shows "Canvas height is automatically extended", followed by the new height in pixels.

Frequently asked questions

What do visitors see on a phone if I don't make a mobile design?

If the Mobile layout of a scene stays empty, visitors on a phone are asked to rotate their device and see the desktop design scaled down to fit. To give phone visitors a design made for their screen, place and adapt elements in the Mobile layout.

Why can't I change an image or video in the Mobile layout?

The content of an element that is also on desktop is managed in the Desktop layout. This applies to images, videos, audio, embeds, charts, forms and slideshows. To change the content, switch to Desktop and edit the element there; the change also appears on mobile. In the Mobile layout, you can still change the element's position, size and styling.

If I change text on desktop, does it update on mobile?

Yes, as long as you haven't edited that element's text in the Mobile layout. Once you edit the text on mobile, the mobile text is detached and later desktop text edits no longer appear on mobile. To sync it again, select the element in the Mobile layout and click Reset in the "Reset element" bar.

Does deleting an element on mobile delete it on desktop?

No. Deleting an element in the Mobile layout removes it from mobile only. The element stays in the desktop design, and you can place it on mobile again from the Element library panel.

Updated on: 29/10/2026