Device Preview
Preview your landing page across desktop, tablet, and mobile devices to ensure responsive design.
Your landing page needs to look great on every device. The device preview feature lets you see how your page appears across different screen sizes.
Preview Sizes
The editor offers three preview sizes:
Desktop
Full-width preview showing the desktop experience. Width: 100% of the panel.
Tablet
Tablet-sized preview for medium screens. Width: 768px.
Mobile
Mobile preview for the smallest screens. Width: 375px.
Switching Preview Sizes
Use the device toggle in the preview header URL bar:
- Click the device icon (desktop, tablet, or mobile) on the left side of the URL bar
- Each click cycles through: Desktop → Tablet → Mobile → Desktop
- The preview resizes smoothly to the new width
Preview Header Controls
The preview header includes a URL bar with several controls:
| Control | Icon | Function |
|---|---|---|
| Device toggle | Cycle through desktop, tablet, mobile sizes | |
| Preview URL | — | Shows the published preview URL |
| Open preview | Open published preview in a new tab | |
| Open live preview | Open the live sandbox preview in a new tab | |
| Refresh | Refresh the preview iframe |
Responsive styles are applied based on the preview width, so you see exactly how the page will look on that device size.
Working with Responsive Design
How Responsive Works
Landing pages use responsive CSS that adapts to screen width:
- Desktop-first: Styles are designed for desktop, then adapted for smaller screens
- Breakpoints: CSS changes apply at specific width thresholds
- Flexible layouts: Elements reflow and resize automatically
Checking Responsiveness
When editing your landing page:
- Make changes on desktop to get the layout right
- Switch to tablet to check the medium breakpoint
- Switch to mobile to verify the mobile experience
- Adjust with the AI or Design Mode if needed
Common Responsive Issues
| Issue | Solution |
|---|---|
| Text too small on mobile | Ask the AI to increase mobile font sizes |
| Columns don't stack | Request "stack columns vertically on mobile" |
| Buttons too wide | Adjust button width constraints |
| Images overflow | Ask for responsive image sizing |
| Spacing too large on mobile | Request reduced mobile padding |
Design Mode and Preview Size
When using Design Mode:
- Changes apply to the current breakpoint
- Some styles may be breakpoint-specific
- Switch preview sizes to check all breakpoints
If a style only applies on mobile, you may need to select mobile preview before the change takes effect.
Preview Types and Priority
The preview panel intelligently selects the best available preview for your landing page, showing a visual indicator to help you understand what you're viewing.
Live Preview
When you see Live Preview in the preview header, you're viewing a live, fully interactive preview:
- Full interactivity—forms, buttons, and links work
- Animations and transitions play in real-time
- Changes update instantly as you edit
- Requires an active sandbox session
- Indicated by an emerald pulsing dot
Hover over the indicator to see the preview source (e.g., "Live development server from active sandbox")
Static Preview
When you see Static Preview in the preview header, you're viewing a static snapshot:
- Pre-rendered snapshot of your landing page
- Not interactive—links and forms won't respond
- Shows the last captured state
- Available even when sandbox is inactive
- Indicated by an amber dot
Hover over the indicator to see when the snapshot was captured and what it represents (e.g., "Snapshot preview saved when sandbox closed")
Preview Priority System
The preview automatically selects the best available option using this priority:
- Live Preview (preferred): If the sandbox is active, you'll always see the live preview
- Static Snapshot: If no live preview is available, the most recent snapshot is shown
- Parent Fallback: For variants and translations, if no preview exists, the parent or original page's preview is used
Static snapshots are automatically created whenever your sandbox session ends, ensuring you always have a preview available even when not actively editing.
Preview States
The preview shows different states as it loads:
| State | Visual Indicator | Meaning |
|---|---|---|
| Initializing | Loading spinner | The sandbox is starting up |
| Loading live preview | Progress indicator | The development server is launching |
| Live preview ready | Live Preview | Full interactive preview is active |
| Static preview | Static Preview | Viewing a pre-rendered snapshot |
| Session expired | Warning message | Click "Renew Session" to restart |
Interacting with the Preview
Clicking Elements
- In normal mode, clicking opens links/triggers actions
- In Design Mode, clicking selects elements for editing
Design Mode Overlay
When Design Mode is active:
- An overlay appears showing element boundaries
- Clicking selects elements for styling
- The action menu appears for selected elements
Scrolling
Scroll within the preview to see the full page. The preview behaves like the actual webpage.
Best Practices
Always Check Mobile
Most web traffic is mobile. Always verify your landing page looks good on mobile before publishing.
Test Interactions
Use the live preview to test:
- Button hover states
- Form submissions
- Animations
- Scroll effects
Consider Touch Targets
On mobile, buttons and links need to be large enough to tap. Aim for at least 44x44 pixels for touch targets.