# Screen Size Visibility *Skill Level: Intermediate* ## Before You Begin * It's highly recommended to become familiar with the [Definitions and Terms](/design/designing-your-app/definitions-and-terms.md) before reading this guide. * This guide only applies when building Responsive Layout Apps. ## Video {% embed url="" %} ## 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. {% hint style="info" %} **NOTE:** Turning off visibility for a component or group will also disable it's [Shared Layout settings](/design/designing-your-app/using-the-layout-tab/shared-layout-settings.md) for that screen size. Notice in the screenshot below that because the Desktop and Tablet toggles are turned off, there are no options to change the Shared Layout Settings for those screen sizes. {% endhint %}
#### 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.
#### 5. Notice in the screenshot above that making components or groups "Not Visible" on a given device, also removes the ability to edit its [Shared](/design/designing-your-app/using-the-layout-tab/shared-layout-settings.md) and [Custom](/design/designing-your-app/using-the-layout-tab/custom-layout-settings.md) Layout settings. {% hint style="info" %} **HINT:** The easiest way to get started with responsive design is to design multiple layouts for the three main screen sizes and control them with visibility. For truly responsive and optimized apps, though, Shared and Custom Layout settings are the way to go! {% endhint %} ## 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](/design/designing-your-app/using-the-screen-size-switcher.md) for more info. ## Help If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/) or [hire an Expert](https://adalo.com/experts) 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!](https://ideas.adalo.com/tutorial-requests) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/design/designing-your-app/using-the-layout-tab/screen-size-visibility.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.