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.
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.
You can reset to Desktop or bounce back to the Mobile Auto-Layout by utilizing the Restore panel.
Note: after refreshing a page you won’t be able to restore previous versions of your project.
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.
Use the keyboard to switch between desktop (1), tablet (2), and mobile (3) layouts in both Edit and Preview modes.
You can change the height of each page in the layout by dragging the “blue diamond” icon.
Note: In mobile and tablet layouts, the On Hover animation cannot be used.
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.