# Mobile responsiveness in Canvas dashboard

> Canvas dashboards stack blocks into a single column on mobile, with three layout modes (auto, manual, none) to control how your desktop design adapts.

:::tip AML Reference
For the full `CanvasLayout` syntax including mobile parameters, see [CanvasLayout](/reference/aml/canvas-layout).
:::

## Introduction
**Mobile view** (in Canvas dashboard) automatically adjusts the dashboards for different screen sizes across desktop and mobile devices.

## Mobile display modes

Our mobile view follows a single-column structure, stacking blocks vertically. It offers three configuration modes:

* **Auto (Default)** – The mobile layout mirrors the desktop version, arranging blocks left to right, top to bottom. Changes in the desktop layout automatically reflect on mobile.
* **Manual** – Customize the mobile layout independently. You can:
  * Rearrange blocks
  * Hide specific blocks
  * Modify block height using the height or aspect-ratio properties in the code editor.
* **None** – The desktop layout remains unchanged on all devices.

## How to configure the mobile view
You can preview and control the mobile view by enabling **Show mobile display** in Dashboard edit mode: 
- **Development**: Support both Visual and Code mode
- **Reporting**: Support Visual mode only

## Syntax
```tsx
Dashboard my_dashboard {
  ...

  view: CanvasLayout {
    block v1 {}
    block v2 {}
    block v3 {}
    
    // highlight-start
    mobile: {
      mode: "manual"
      block v1 {
        height: 100
      }
      block v3
      block v2 {
        aspect_ratio: "16 / 9"
      }
    }
    // highlight-end
  }
}
```