With the Visibility settings feature, you can show or hide specific boxes for each screen width (breakpoint).
Point: Responsive design in Studio.Design
In Studio.Design, you start with a single page design and adjust styles for each screen width (breakpoint) to create a responsive design.
You can change the layout, appearance, and position of boxes and text for each breakpoint, but the actual content of images and text, as well as the grouping structure, stays the same across all breakpoints.
For more about the overall approach to responsive design and related features, check out these articles:
How to configure Visibility settings
Note: If you hide a parent box, all boxes inside it will also be hidden.
Open the Layers panel.
Hover over the layer of the box you want to configure, and click the eye icon
(Visibility settings) on the right.Uncheck the device sizes where you want to hide the box.
Tips: Design examples using Visibility settings
You can use Visibility settings to show different menu styles depending on the device, like this:
On the default (desktop) screen: a navigation menu
On mobile screens: a hamburger menu
For more details, see How can I create a hamburger menu?
hide layer show condition hide condition