I’ve created the dashboard below, consisting of 4 sections (two horizontal cards each). I want to display it on my TV as two columns of two sections each. But when I cast it I always just get one column with all sections stacked, despite the fact that there appears to be more than enough room for two columns.
On my browser I get the same one column format UNLESS I zoom out a lot - as I’ve done in the below screenshot - in which case it does show the two columns, but with huge gaps around them. I suspect it’s these gaps that are forcing it to one column on my TV. Same on Chrome and Edge browser.
Searching for this issue led me to the ha-view-sections-column-gap parameter and I created a new theme
my_default:
ha-view-sections-column-gap: 8px
It does move the sections a little bit, but doesn’t eliminate that huge gap in between them.
Each section width is set to 2
The view setting “Max number of sections wide” is set to 4. Less than 4 gives me one column no matter what the browser zoom (I guess this controls the number of cards not actually the number of sections?). More than 4 will put more sections side-by-side on the browser if I zoom out enough.
Here’s what I’m testing on:
- Core 2025.1.4
- Supervisor 2024.12.3
- Operating System 14.1
- Frontend 20250109.2