Responsive Layouts
Responsive layouts lets one Drag & Drop Card dashboard adapt to different screen sizes. This is important when the same design should work on a desktop browser, a wall tablet, and a phone.
Instead of shrinking the entire desktop dashboard until it becomes unreadable, create a layout for each important device type. The same cards can be arranged differently for desktop, tablet, and mobile. When the Drag & Drop card in in Auto mode, you can toggle different views for each type of device. Changing the view in one, will not affect the layout in antoher.
How to design responsively
- Design the main tablet or desktop layout first.
- Decide which cards are essential on mobile.
- Move the most important controls near the top of the mobile layout.
- Hide decorative or low-priority elements on small screens.
- Test on real devices, not only by resizing a desktop browser.
Settings reference
| Dashboard setting | YAML setting | What it does | Value possibilities |
|---|---|---|---|
| Viewport profiles | responsive_viewports | Defines the target screen profiles the dashboard can adapt to. | Viewport definitions such as desktop, tablet, mobile, portrait, or landscape. |
| Responsive card layouts | responsive_layouts | Stores card positions and sizes for each viewport profile. | Card layout data for each profile. |
| Responsive connectors | responsive_connectors | Stores connector paths or positions that differ by viewport. | Connector layout data for each profile. |
| Optimize for mobile | optimize_for_mobile | Enables mobile-oriented layout behavior where supported. | true or false. |
| Mobile dynamic behavior | mobile_dynamic_behavior | Lets DDC adjust behavior dynamically on smaller screens. | true or false. |
Image slotAdd desktop, tablet, and mobile screenshots of the same dashboard.
Last updated 2026-05-28.