# Using the Screen Size Switcher

*Skill Level: Beginner*

## Before You Begin

* Make sure you've completed the guide for [Creating a Responsive App](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/design/designing-your-app/creating-a-responsive-app) and have an app created.

## Video

{% embed url="<https://www.youtube.com/watch?v=1ZqJtTtIVxs>" %}

## Walkthrough

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

* **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

{% hint style="info" %}
**NOTE:** Thanks to Responsive Apps, rotating a device from vertical to horizontal now adapts the app layout to match the screen size!
{% endhint %}

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

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F8WmfwMx63Q8Fpjg2U5Q3%2FScreen%20Shot%202023-03-06%20at%2010.25.55%20AM.png?alt=media&#x26;token=03ed8c30-3b80-44f4-976e-8b75f264894a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FHGxsdKhj1ITGxyAeN28V%2FScreen%20Shot%202023-03-06%20at%2010.27.58%20AM.png?alt=media&#x26;token=c830c12b-72b4-4db8-b9d2-c8e237c59ea2" alt=""><figcaption></figcaption></figure>

#### 4. When changing the device with the screen switcher, components on the screen will behave according to their [Layout](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/design/designing-your-app/using-the-layout-tab) 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.&#x20;

#### 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.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FKSti4TdiLG2D40yD8Cy0%2F2023-03-06_10-45-08_AdobeExpress.gif?alt=media&#x26;token=58cc0e59-781b-4aad-b413-9b4516508156" alt=""><figcaption></figcaption></figure>

## 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](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)