Section Based Dashboard: Enlarge grid_columns on mobile?

Configuration Frontend
1

Hi everyone,

trying to solve something that I thought would be easy, but can’t find a solution:

I have a sections based dashboard which is 2 sections wide.
In one of the rows I have two cards, one using 2/3 of the columens and one using 1/3.
This is the row giving me headache.
All the other rows use only one large card or two cards that share the columns half-half.

When the layout collapses to 1 section on smaller (mobile) devices, the cards are ordered below instead of next to each other (as supposed).

The larger card (configured to use 2/3 of the 2 sections) is finely reducing its width to one section, resulting in a full width layout on the smaller screens.
But the other card stays smaller, as it’s configured to use less than a whole section. :face_with_raised_eyebrow:
This looks quite stupid and I would like to increase the width to the full section in this case.
While this sounds like “works as intended”, I still ask myself if there’s really no way to get around this.

I know I can solve this by using layout_card and provide my own grid code.
As you can use screen width based overrides here, this gives even more flexibility for sure.

But this is an already large section based layout I’m quite happy with, beside this one exception.
So maybe there’s a hack I missed so far. :wink:

2

Card-Mod also wasn’t successful.
It seems like HA overwrites the resulting CSS-vars very aggressively. :stuck_out_tongue:

Current workaround:
Use the same card twice with different column settings and a visibility settings with different media screen size queries.

3

Did you try a 2 grid cards in the main section? One grid 2/3 and 1 1/3. Use cards in each grid full width and from what I understand this should easily give what you are after.

4

You’re right. I was too much in CSS hacking mode yesterday to think about the simple solutions. :smile:

Will test that later and see if this results in the next CSS hacking to get consistent card gaps compared to not using grid card. :wink:

But as it’s a core card, I might be in luck and everything behaves as I want on its own.

1 Like