Mobile Responsive Canvas Dashboard

Responsive Design in Canvas Dashboard

Canvas dashboard can automatically adjust for different screen sizes across desktop and mobile devices. You can preview and control the mobile layout by enabling Show mobile display in Development mode.

Mobile Layout Modes

The mobile layout 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.

Example

Dashboard my_dashboard {
  ...


  view: CanvasLayout {
    block v1 {}
    block v2 {}
    block v3 {}
    
    mobile: {
      mode: "manual"
      block v1 {
        height: 100
      }
      block v3
      block v2 {
        aspect_ratio: "16 / 9"
      }
    }
  }
}