In addition to the Desktop layout, you can enable Tablet and/or Mobile layouts for your pages. To do so, click the Viewports icon at the bottom left corner of the Editor window. Switch the toggle on next to the Mobile in order to activate the mobile layout in your project.
Note: In mobile and tablet layouts, the On Hover animation cannot be used.
Create composition
When you activate the mobile layout it automatically launches Mobile Auto-Layout, which renders the page as a whole according to different screen sizes and arranges the objects in a single “flow,” one after another.
Click ‘Create composition’ to see two other methods that can help you easily generate mobile layouts:
- Fit to mobile. Widgets will keep the same positions as in the Desktop version but will be resized to fit the width of the mobile layout.
- Desktop layout. This option will recreate the initial proportions of your Desktop layout. After that, you can move and resize widgets manually to achieve the desired look for the mobile layout.
These options (including Auto Layout) can be enabled for selected widgets as well.
Note: This is not applicable to global widgets (widgets that have ‘On all pages’ turned on).
Select at least two widgets and click Auto Layout, Fit to mobile, or Desktop layout. Only the selected widgets will be rearranged. The rest will keep their size and position.
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.
Note: Without Tablet layout, mobile devices will show the desktop version when horizontal. Tablets in the horizontal position will also show the desktop version.
Mobile Auto-Layout will only be applied to pages that have never had Mobile Viewport activated. For pages on which Mobile Viewport has been used earlier, Auto-Layout will not be applied, so as not to interfere with preexisting designs.
Shortcuts
Use the keyboard to switch between desktop (1), tablet (2), and mobile (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 & Guides settings and enter the desired value in the upper right corner.
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).
Note: 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.