Responsive and device variants
Create mobile and desktop versions of a screen and keep them in step.
Last updated
Creating a variant
Ask for it, or use the device control on the screen:
Make a mobile version of the landing page.
The variant is a new screen on the canvas, adapted to the target width — not a fluid resize. Layouts are genuinely rearranged: multi-column sections stack, navigation collapses, type scales down.
Cost
Converting a screen to another device size is charged per screen at the same rate as a regeneration, because it is one. Converting eight screens costs eight times that — worth checking your balance first.
Keeping variants in step
Variants are separate screens, so a later edit to the desktop version does not automatically flow into the mobile one. Two options:
- Ask for the change on both explicitly: "On both the desktop and mobile landing pages, change the CTA to 'Start free'."
- Or finish the desktop design first, then generate the variants once at the end. This is usually the cheaper order of operations.
Theme is shared
Both variants use the project theme, so colour and font changes apply to both automatically. Only layout is per-variant.
Exported code
Exported code reflects the screen you exported. If you need one genuinely responsive implementation rather than two fixed layouts, export the desktop screen and adapt, or export both and merge at the breakpoint — see Export code.
Was this article helpful?
Related articles
Editing a screen
The three ways to change a design — chat, edit mode and theming — and when each is the right tool.
Themes and style guides
How the project theme works, how to change it safely, and why colours should never be edited screen by screen.
Export code (HTML, React, Tailwind)
Export a single screen or a whole project as production-ready front-end code.