> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fimo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive

> Preview your site across devices and screen sizes.

**Responsive mode** lets you test how your site looks on different devices and screen sizes. Switch between desktop, tablet, and mobile, adjust zoom, and rotate devices horizontally or vertically.

<img src="https://mintcdn.com/strapi/zY8lhvZtFTIE3pg6/public/images/fimo-responsive.png?fit=max&auto=format&n=zY8lhvZtFTIE3pg6&q=85&s=88e94f04ed0bb79cf7a19b8e19fd93eb" alt="Responsive Mode" width="3144" height="2020" data-path="public/images/fimo-responsive.png" />

<Note>
  Responsive mode works alongside other tools.\
  You can edit content, add comments, or refresh the preview window while viewing different devices.
</Note>

## Why use Responsive mode?

<Columns cols={2}>
  <Card title="Test layouts" icon="table-columns">
    Check how your design adapts across desktop, tablet, and mobile.
  </Card>

  <Card title="Simulate devices" icon="mobile">
    Toggle between portrait and landscape orientation.
  </Card>

  <Card title="Adjust zoom" icon="magnifying-glass-plus">
    Change the zoom level of the preview window for easier review.
  </Card>

  <Card title="Catch issues early" icon="bug">
    Spot and fix layout or spacing problems before publishing.
  </Card>
</Columns>

## How it works

<Steps>
  <Step title="Enter Responsive mode">
    Click the **Mobile** icon in the preview toolbar.
  </Step>

  <Step title="Choose a device">
    Select **Desktop**, **Tablet**, or **Mobile** from the dropdown.
  </Step>

  <Step title="Adjust zoom">
    Use the zoom menu to resize the preview window (for example, 100% or 125%).
  </Step>

  <Step title="Rotate the device">
    Switch between portrait and landscape to test layouts.
  </Step>
</Steps>

<Tip>
  Always check your site in mobile view before publishing. Most visitors will experience your website on smaller screens.
</Tip>