Use Screen Settings to create unique experiences across devices. Each element's styles and visibility can be independently edited for Large screens (wide screen and desktop devices), Medium screens (laptops), Small screens (tablets), or Extra-small screens (mobile devices).
How to Toggle Between Device Views
You can preview your content at common device sizes using the toggles at the top of the editor. We recommend checking these views throughout the page building process to help ensure everything is looking good and as expected for all screen sizes.
Where to Change an Element's Screen Settings
The Screen Settings feature allows you apply different style settings to elements based on different screen sizes. You can click on the icons at the top of the screen to select which view you would like to edit. Once clicked, you will see a notice at the right hand side bar that will say "Editing for ___ screen sizes" which will indicate which screen size you are editing. This will give you the option the apply styles specifically for desktop, laptop, tablet, or mobile-sized screens.
Hiding and Showing Elements Based on Screen Size
If you'd like to set an element to be hidden on a specific screen size, the Show toggle in the Visibility style setting can be used. Disabling the toggle will hide the element from the selected screen size.
In the above example, the entire container was set to be hidden on extra small screens (mobile devices). The following steps were taken to achieve this:
Select the Container element
Scroll down to the Visibility style menu in the right sidebar
Disable the toggle next to the Extra-small screens option
When previewing each device view, you'll now see the entire Container element is no longer visible on extra small screens, but is still present in other views.