In addition to the default Desktop layout, you can enable Tablet and/or Mobile layouts for your pages. To do so, click the Viewports icon in the left dock of the Editor window.

In mobile and tablet layouts, the On Hover animation cannot be used.

Arrange widgets

When you activate mobile layout, it automatically renders the page based on screen sizes (known as Auto Layout). It also arranges all widgets in a single “column,” one after another.

Click ‘Arrange widgets’ to see two additional methods that can help you easily generate a new mobile design:

Resize desktop to mobile. Widgets will keep the same positions as the Desktop version but will be resized to fit the width of the mobile layout.

1:1 desktop layout. This option will recreate the initial proportions of your Desktop layout, which you can adjust manually to achieve the desired look for your mobile layout.

These options, including Single-column layout, can also be enabled for specific widgets.

This does not apply to global widgets (widgets that have ‘On all pages’ turned on).

Select at least two widgets and click your preferred arrangement method.

Please remember that this affects only the size and position of widgets. Their attributes (color, font size, etc.) won’t be changed when switching between different mobile layout options.

Tablet layout

Additionally, you can enable Tablet layout, which is also used by mobile phones when in landscape mode. To do so, click on the Plus icon next to the Mobile layout option and activate the toggle. If you want to deactivate the Tablet version, turn the toggle off and press Minus.

Without Tablet layout, mobile devices will show the desktop version when horizontal. Tablets in the horizontal position will also show the desktop version.

Auto Layout (Single-column layout) will only be applied to pages that have never had Mobile Viewport activated. This is done to avoid interfering with preexisting designs.

Shortcuts

Use the keyboard to switch between desktop (1), mobile (2), and tablet (3) layouts in both Edit and Preview modes.

Page height

You can change the height of each page in the layout by dragging the “blue diamond” icon.

Custom width

To customize the width of your mobile layout, open your Grid & Layout settings and enter the desired value.

On mobile devices, project content will be scaled up or down depending on the width of a particular screen.

Mobile layout on different devices

To see how your project looks on different devices, enter Preview mode and use the toggle at the top of your screen. As of now, these types of devices are available to preview:

iPhone SE (vertical and horizontal)
iPhone 11 Pro/X
Google Pixel 2 XL
Samsung Galaxy S20

You can also preview your project for tablets (in case you haven’t activated the Tablet version separately).

The sizes of displayed layouts may differ from real devices, but the proportions are the same.

Layouts on different screens

If you create desktop (1024 px), tablet (768 px), and mobile (320 px) layouts of the same page the one closest to the actual screen width of the particular device will be displayed. When rotating a mobile device from portrait to landscape view the desktop version will be shown.