Using the Screen Size Switcher

The screen size switcher is super handy for quickly visualizing how your app will behave on the three main screen sizes.

Skill Level: Beginner

Before You Begin

• Make sure you've completed the guide for Creating a Responsive App and have an app created.

Video

Walkthrough

1. Adalo's new Responsive Apps Builder offers building for three different screen sizes, with predefined resolutions:

• Desktop - screens larger than 992 x infinite height

• Tablet- screens 768 - 991 wide x infinite height

• Mobile - screens up to 767 wide x infinite height

NOTE: Thanks to Responsive Apps, rotating a device from vertical to horizontal now adapts the app layout to match the screen size!

2. To access the screen switcher, simply click the device icon at the top left of any screen in the builder.

3. Clicking on the different device types will adjust the screen size in the builder so you can build for that specific screen size.

4. When changing the device with the screen switcher, components on the screen will behave according to their Layout settings.

In this sense, the screen switcher serves as more of an in-builder preview than an actual control of what happens to the app's screen layout.

5. You can also preview these different screen sizes by clicking on the screen's label, then clicking and dragging on the screen's yellow borders.

Use the screen switcher to reset the screen size back to one of the default screen sizes at any time.

Learn More

• The predefined pixel widths cannot be changed with responsive apps to help you stay aligned with industry-standard screen widths. If you need more advanced control, you can check out the other Screen Detector components in the Adalo Marketplace, though we can't assure the best performance when combining responsive methods in this way.

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!