In addition to the Desktop layout, you can enable Tablet and/or Mobile layouts for your pages. Click Viewport (1/2/3) on the Widgets bar to access the panel to activate them.
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.
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.