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!​

Creating a Responsive App

Alignment Tools

Last modified 5mo ago