Screen Size Visibility
You can change whether components or groups of components are visible on different screen sizes with the click of a button!
Skill Level: Intermediate
Before You Begin
It's highly recommended to become familiar with the Definitions and Terms before reading this guide.
This guide only applies when building Responsive Layout Apps.
Video
Walkthrough
1. To access the Screen Size Visibility controls, click on a component. Then click on the Layout tab.

2. At the very top, you will see the Visibility controls for different screen sizes of this component.

3. Clicking on one of these buttons will toggle the device visibility on and off for the selected component.
For instance, if this rectangle component should only be visible on mobile, then you would turn off the Desktop and Tablet visibility. Notice in the screenshot below how the buttons are now slightly greyed out and accompanied by a "closed eye" icon.

4. In addition to individual components, you can also change visibility settings on entire groups of components as well.
Keep in mind that the group visibility settings will overwrite the visibility settings of individual components within that group.

Learn More
Currently, it is not possible to control the constraints of screen sizes. The screen sizes are pre-defined dimensions in pixels and cannot be changed; however, these are highly standardized, so your apps will always respond best to most devices on the market today. See Using the Screen Size Switcher for more info.
Help
If you need additional help with this article, you can always ask in our community forum or hire an Expert to help! Be sure to paste the link to this article in your post as well!
Do you have a tutorial or help doc request? Let us know!
Last updated
Was this helpful?