---
title: "Preview your app at different screen sizes"
description: "Switch the Build Mode stage between phone, tablet, laptop and desktop widths, and keep one Portal per screen you design for."
url: https://help.modeinspect.com/en/articles/27-preview-your-app-at-different-screen-sizes
collection: "Build mode"
updated: 2026-10-29
language: en
---

# Preview your app at different screen sizes

Switch the Build Mode stage between phone, tablet, laptop and desktop widths, and keep one Portal per screen you design for.

See the page on the stage at the width of a phone, a tablet, a laptop, or a desktop, the way a user on that device sees it. Do this before you ask for a change that only matters at one size.

**Before you start**

-   Build Mode open on the page, see [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-and-navigate-build-mode.md).
    

## Steps

1.  Click the screen icon at the right end of the toolbar above the stage. The menu lists **Full width** and five sizes: **Mobile** 390 × 844, **Tablet** 768 × 1024, **Laptop** 1280 × 800, **Desktop** 1440 × 900, and **Large desktop** 1920 × 1080.
    
    ![The preview resolution menu open above the stage: Full width ticked, then Mobile, Tablet, Laptop, Desktop, and Large desktop with their sizes](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/YN8K4te6y6mzmxSoCxzzoUM1TsoPmcDeyOql491vWV7KEBHcD6M6oWL5aC79ANSg6GdSuAvduOz.png)
2.  Pick a size. The page reflows to that width in the middle of the stage, and the icon on the button changes to the device. A width wider than your window is scaled down to fit.
    
    ![The stage at Mobile: the demo shop 390 px wide and centered, with the phone icon on the resolution button](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/s03rfXPvQyLT6pbhYMDms84YoKXQzBSIqqmoACEItQDWROjlmSr3TYmNyj2oVod4O0O0pVRj0yt.png)
3.  Pick **Full width** to let the page fill the stage again.
    

The Portal on the canvas takes the size you picked, so it shows the same width when you go **Back to Canvas**. **Full width** sets it to **Desktop**.

## Several screen sizes at once

Build Mode shows one width at a time. There is no side-by-side view of a phone and a desktop inside it.

To design for several screens, put one Portal per size on the canvas and set each one's **Preview Resolution** in the design panel, see [Add a Portal to the canvas](https://help.modeinspect.com/en/articles/31-add-a-portal.md). Open Build Mode from the Portal whose size you want to work at.

## If it does not work

-   **The menu starts with Custom, greyed out**: the Portal was resized by hand on the canvas, and Build Mode kept that width. Pick a size to leave it.
    
-   **Text looks small at Large desktop**: the page is 1920 px wide to your app and scaled down to fit your window. Zoom your browser or pick a narrower size.
    

## Related

-   [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-and-navigate-build-mode.md)
    
-   [What is Build Mode](https://help.modeinspect.com/en/articles/30-what-is-build-mode.md)
    
-   [Add a Portal to the canvas](https://help.modeinspect.com/en/articles/31-add-a-portal.md)

## Related

- [What is Build Mode](https://help.modeinspect.com/en/articles/30-what-is-build-mode.md)
- [Open Build Mode and move around your app](https://help.modeinspect.com/en/articles/29-open-build-mode-and-move-around-your-app.md)
- [From a captured frame to code](https://help.modeinspect.com/en/articles/25-from-a-captured-frame-to-code.md)
- [Attach a frame to the build chat](https://help.modeinspect.com/en/articles/22-attach-a-frame-to-the-build-chat.md)
- [Attach images to the build chat](https://help.modeinspect.com/en/articles/24-attach-images-to-the-build-chat.md)