Use Screen Settings to create unique experiences across devices. You can choose whether an element or section (containing element) displays on Widescreen, Desktop, Tablet, or Mobile screen sizes.
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 to hide and show elements on different device types. To change which screen sizes each element is visible on, you can first select an element in the editor, then go to its Screen Settings style options in the right sidebar.
How to Use Screen Settings
Screen Settings are super useful for creating responsive content and content that is specific to certain device types! Once your target element is selected, simply navigate to the Screen Settings section of its style settings.
In this section, there is a button to represent different device types: widescreen monitors, standard desktops, tablets, and mobile phones. If the device button is blue in the Screen Settings, this means that the selected element will show on that device. If the button is grey, then it will not show when viewing your site on this device.
For example, if you would like an element to show on desktop but not on mobile or tablet, your screen settings would look like this:
As you can see in the example above, this will only show on widescreen devices and desktop as these are the only two devices that are selected.
You can mix and match Screen Settings to fit your needs. This can really help you create a design that you are proud of, and that works for users on any device size.