Sign Up for Adalo

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.

NOTE: Turning off visibility for a component or group will also disable it's Shared Layout settings 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.

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 and Custom Layout settings.

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!

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!

PreviousUsing the Layout TabNextSticky While Scrolling

Last updated

Was this helpful?