Adjusting vertical space between elements in lovelace

Configuration Frontend
1

I’m running 9.5 / 2023.4.4

The spaces between the elements in the standard element cards is getting worse and worse with each release of HA. It looks like 200% font size of space between elements which makes the dashboard even more unweildy than the lovelace dashboards are with everything moving to a random place as you try to align as best as you can.

I googled and searched other topics but they’re all very old, say you have to use a custom card or custom layout which doesn’t make any sense. With all of the customization you can there has to be a way to adjust the css for the element cards that are built-into HA.

This is just an disconnected auto-generated card for visual example.ha-entities

2

Yes it would be nice if the HA team could make exciting the dashboard a bit mind UI friendly.

I’m using the gap card by installing it from the HACS front-end section by adding this custom repository GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.

3

I tried layout-card a while back. It does help with the layout a fractional amount but it doesn’t fix the element list problem and it doesn’t fix the … “oh you want these two panels to appear next to each other? no, just no.”

4

Yes the spacing is ridiculous. I use card-mod to reduce it:

card_mod:
  style:
    .: |
      #states > * {
          margin: -1px 0px !important;
      }
3 Likes
5

Hi Tom_I

Where do we place that to get it working, is it in the dashboard raw code?

6

In each card you want to modify.