Responsive and device variants

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.