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.
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.