> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive previews

> Preview your app at mobile, tablet, and desktop breakpoints side by side. Catch responsive issues without resizing the browser.

The preview pane in vly's editor supports **multi-breakpoint side-by-side previews**. Toggle from the preview toolbar to see your app at mobile, tablet, and desktop widths simultaneously.

## How to toggle

<Steps>
  <Step title="Preview toolbar → Layout dropdown">
    Pick "Single", "Mobile + Desktop", or "All three".
  </Step>

  <Step title="Resize each pane independently">
    Drag the divider to fine-tune. The preview re-renders at the new width.
  </Step>

  <Step title="Lock to a breakpoint">
    Click the breakpoint name to lock — useful for screenshot-perfect testing at exactly 375px or 1280px.
  </Step>
</Steps>

## Default breakpoints

| Name | Width | Tailwind class |
| - | - | - |
| Mobile | 375px | (default; smaller than `sm`) |
| Tablet | 768px | `md` |
| Desktop | 1280px | `lg` / `xl` |

Customize in your project's preview settings if your app targets different breakpoints.

## Responsive design tips

<CardGroup cols={2}>
  <Card title="Design mobile-first" icon="smartphone">
    Tailwind's default breakpoints are mobile-first. Start with no prefix; layer `md:` and `lg:` for larger screens.
  </Card>

  <Card title="Use Container queries when scoped" icon="ruler">
    For components that should adapt to their parent (not the viewport), use Tailwind's `@container` queries.
  </Card>

  <Card title="Test on real devices" icon="phone">
    The preview is good but not perfect — different OS browsers (mobile Safari, mobile Chrome) have quirks. Test on a real phone before launch.
  </Card>

  <Card title="Watch font sizes" icon="type">
    Mobile body should be 16px+ to avoid iOS auto-zoom on form fields.
  </Card>
</CardGroup>

## Common responsive prompts

```text theme={null}
Make the dashboard responsive — on mobile, the sidebar collapses into a
hamburger menu; tablet shows the sidebar but narrow; desktop shows the
full sidebar.
```

```text theme={null}
On the task list, show 3 columns on desktop, 2 on tablet, 1 on mobile.
```

```text theme={null}
Test the signup page on mobile — the form is too wide and the button
runs off the right edge. Fix it.
```

## Related

<CardGroup cols={3}>
  <Card title="Tailwind config" icon="settings-2" href="/features/design/tailwind-config">
    Customize breakpoints.
  </Card>

  <Card title="Design systems" icon="layout-grid" href="/features/design/design-systems">
    The broader system.
  </Card>

  <Card title="Visual edits" icon="mouse-pointer-2" href="/building/visual-edits">
    Click-to-edit on the canvas.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.