Tip: Responsive design in Studio.Design
In Studio.Design, you create responsive designs by starting from a single page design and adjusting styles for each screen width (breakpoint).
While the layout, appearance, and position of boxes and text can be changed per breakpoint, the actual content of images and text, as well as the grouping structure, are shared across all breakpoints.
For more about the overall approach to responsive design and related features, check out these articles:
An element may be hidden at certain screen widths because of the visibility settings for each breakpoint. Follow the steps below to select the element from the screen and check its visibility settings.
Check the visibility settings
Open the Layers panel and hover over the box element you want to check.
Click the eye icon
(visibility settings) shown to the right of the layer.Check that the breakpoints where you want the box to appear (Desktop, Tablet, Mobile, etc.) are turned on.
If a breakpoint is unchecked, check it to make the box visible.
Other possible causes besides visibility settings
The parent box's width is set to 0.
The box has a fixed pixel width that's larger than the screen width, causing it to overflow the layout.
An unnecessary parent box is wrapping the element, and the parent box's visibility or size settings are causing it to be hidden.
The "On appear" conditional style is set, but not configured correctly.
For how to check the causes above, see Images don't appear on tablet or mobile.
disappears on mobile missing on mobile not showing on mobile can't see on mobile
disappears on desktop missing on desktop not showing on desktop can't see on desktop
disappears on tablet missing on tablet not showing on tablet can't see on tablet
disappears on default missing on default not showing on default can't see on default