CARD MOD reduce padding

Configuration Frontend
1

Hi,

How can I change the spacing around this card without everything on the page will change?

  - type: custom:mushroom-template-card
    primary: Home
    icon: mdi:home
    icon_color: blue
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: home
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          background: none;
          padding: 1px; <-- won't work
        }
2

try this

- type: custom:mushroom-template-card
    primary: Home
    icon: mdi:home
    icon_color: blue
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: home
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          background: none;
        }
        .mushroom-template-card {
          padding: 16px; /* Add some padding to the card */
        }
3

Unfortunately also did not work.

4 
    ha-card {
      box-shadow: none;
      background: none;
      padding: 0px !important;
    }

Solves the issue.

4 Likes