Weird behaviour if screen width is below ~760px

Grafana Dashboards
1

  • What Grafana version and what operating system are you using?
    Grafana 9.5.2 as Docker container on Synology NAS

  • What are you trying to achieve?
    Create a dashboard for mobile devices

  • How are you trying to achieve it?
    Place two elements side by side per row, so it’s a fit on mobile device with screen width of around 600px. So I expect the elements are shown on the mobile device with a width of around 300px each.

  • What happened?
    The default amount of 24 columns on a dashboard is reduced to one column, as soon as the display width is below around 760px. With that behaviour it’s impossible to place two or more elements side by side for a portrait screen like on a mobile device.

  • What did you expect to happen?
    The elements are side by side as drawn on the browser windows on a PC, which is of course way “wider” than the mobile resolution.

  • Can you copy/paste the configuration(s) that you are having problems with?
    Just put two elements side by side and reduce browser width below ~760px. Now you see what happens: Each element is using the full width, so it’s only one element per row.

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
    No errors at all.

  • Did you follow any online instructions? If so, what is the URL?
    No, it’s just a dashboard with some simple elements.

2

No ideas so far on how to achieve this?