Check the layout at 390 pixels before you build it.
Stated plainly because the buttons imply more than they do: these are viewport widths, not platforms.
The canvas previews a generated page at three widths: desktop at full width, tablet at 768 pixels and mobile at 390 pixels, which is a common phone viewport. These are preview widths for a responsive web page. They are not build targets, and Design mode does not produce iOS, Android, React Native or Flutter output. What you are checking is whether the layout you just generated survives a narrow viewport, which is where generated layouts most often fall apart.
What the three buttons actually do
They resize the preview frame. The page inside is one HTML document with its own media queries, so switching to mobile shows you how that document responds at 390 pixels. Nothing is recompiled, nothing is rebuilt for a platform, and no second artefact is produced.
Why narrow is where generated layouts break
A generated page usually looks fine at 1440 pixels because that is the shape most layouts assume. The failures show up narrow: a grid that will not collapse, a heading that overflows, a nav that has nowhere to go. Checking it at the point of generation is much cheaper than discovering it after the page is implemented.
It is not a device emulator
There is no touch simulation, no device pixel ratio emulation, no platform chrome and no operating system behaviour. It is a width. Anything that depends on real device behaviour belongs in a browser's own device tooling or on an actual phone.
What to reach for instead for native
If you need genuine native mobile screens, this is not the tool and the honest answer is Figma or Uizard for design and a native toolchain for implementation. Design mode covers responsive web, which is a smaller claim than the button labels suggest and the one that is actually true.
The three preview widths
| Button | Width | What it means |
|---|---|---|
| Desktop | 100% | The frame's full width |
| Tablet | 768px | A common tablet breakpoint |
| Mobile | 390px | A common phone viewport |
Questions
Related
- AI Landing Page DesignA real page you can open and click, not a picture of one.
- Wireframe to High FidelityA finished-looking mockup gets reviewed as a design. A rough one gets reviewed as a structure.
- Click to Edit an AI DesignThe difference between iterating and rerolling.
- Design With Your Claude Code or Codex LoginNo second subscription for the design tool, because it is running the one you already pay for.
Last updated