Spacing in dashboards

Hi,

I would like to reduce the spacing between the cards (where I have marked with red lines), but I can simply not figure out how to. I have tried using Card-Mod, but can’t make it work. Maybe it’s simply misplacement of the code. Please help out a noob :slight_smile:

>   - title: EnergyNew
>     path: energyNew
>     icon: null
>     theme: noctis
>     type: custom:grid-layout
>     badges: []
>     layout:
>       grid-template-columns: 50% 50%
>       grid-template-rows: 5% 55%
>       grid-template-areas: |
>         "header_left header_right"
>         "main_left main_right"
>     cards:
>       - type: custom:mushroom-chips-card
>         chips:
>           - type: back
>       - type: vertical-stack
>         cards:
>           - type: custom:mushroom-title-card
>             title: Production
>           - type: horizontal-stack
>             cards:
>               - graph: line
>                 type: sensor
>                 entity: sensor.calc_current_production
>                 detail: 1
>                 theme: noctis
>                 hours_to_show: 24
>               - type: custom:mini-graph-card
>                 entities:
>                   - sensor.calc_current_production
>                 hours_to_show: 24
>           - type: custom:mushroom-title-card
>             title: Consumption
>           - type: horizontal-stack
>             cards:
>               - graph: line
>                 type: sensor
>                 entity: sensor.calc_current_consumption
>                 detail: 1
>                 hours_to_show: 24
>               - type: gauge
>                 entity: sensor.excess_production
>                 theme: noctis
>                 max: 5000
>                 needle: false
>           - type: custom:mushroom-title-card
>             title: Export
>           - type: horizontal-stack
>             cards:
>               - graph: line
>                 type: sensor
>                 entity: sensor.calc_current_export
>                 detail: 1
>                 hours_to_show: 24
>               - graph: line
>                 type: sensor
>                 entity: sensor.calc_current_export
>                 detail: 1
>                 hours_to_show: 24
>         view_layout:
>           grid-area: main_left
>       - type: vertical-stack
>         cards:
>           - type: custom:mushroom-title-card
>             title: Production
>             style: |
>               ha-card {
>               padding: 0px 0px 0px 0px;
>               }      
>           - type: horizontal-stack
>             cards:
>               - graph: line
>                 type: sensor
>                 entity: sensor.calc_current_production
>                 detail: 1
>                 hours_to_show: 24
>               - type: custom:mini-graph-card
>                 entities:
>                   - sensor.calc_current_production
>                 hours_to_show: 24
>           - type: custom:mushroom-title-card
>             title: Consumption
>           - type: horizontal-stack
>             cards:
>               - graph: line
>                 type: sensor
>                 entity: sensor.calc_current_consumption
>                 detail: 1
>                 hours_to_show: 24
>               - type: gauge
>                 entity: sensor.excess_production
>                 theme: noctis
>                 max: 5000
>                 needle: false
>           - type: custom:mushroom-title-card
>             title: Export
>           - type: horizontal-stack
>             cards:
>               - graph: line
>                 type: sensor
>                 entity: sensor.calc_current_export
>                 detail: 1
>                 hours_to_show: 24
>               - graph: line
>                 type: sensor
>                 entity: sensor.calc_current_export
>                 detail: 1
>                 hours_to_show: 24
>         view_layout:
>           grid-area: main_right

changing the mushroom-title-card with a custom:button-card could do the trick.

      - type: custom:button-card
        name: Production
        styles:
          card:
            - background: none
            - border: none
            - margin-bottom: '-10px'
          name:
            - justify-self: start
            - font-size: 25px

Thanks…that workaround works like a charm!

1 Like