Align & Resize horizontal and vertical cards

Configuration
1

Hi co-users :slight_smile:

I’m trying to resize my custom.mini-graph-card in the middle so it won’t stretch with my light cards. I already tried some things with style code but it doesn’t seem to do anything. Is it at all possible?

This is what it looks like now:

current_ha
current_ha1013×766 26.5 KB

This is how I want it to look:

future_ha
future_ha996×760 40.4 KB

This is the code I use:

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.woonkamer
        show_brightness_control: true
        tap_action:
          action: toggle
        fill_container: false
      - type: custom:mushroom-light-card
        entity: light.woonkamer_bloom
        name: Sfeerlamp
        show_brightness_control: true
        show_color_control: true
        show_color_temp_control: true
        use_light_color: true
        tap_action:
          action: toggle
      - type: custom:mushroom-light-card
        entity: light.woonkamer_salontafel
        show_brightness_control: true
        name: Salontafel
        tap_action:
          action: toggle
      - type: custom:mushroom-light-card
        entity: light.woonkamer_pilaar_bank
        name: Bank
        show_brightness_control: true
        tap_action:
          action: toggle
      - type: custom:mushroom-light-card
        entity: light.woonkamer_pilaar_hoek
        name: Hoek
        use_light_color: false
        show_brightness_control: true
        tap_action:
          action: toggle
      - type: custom:mushroom-light-card
        entity: light.dressoir
        name: Dressoir
        show_brightness_control: true
        tap_action:
          action: toggle
  - type: custom:mini-graph-card
    entities:
      - sensor.kantoor_temp
    show:
      labels: true
    color_thresholds:
      - value: 18
        color: '#3399ff'
      - value: 20
        color: '#ff8533'
      - value: 21.5
        color: '#c0392b'
    styles:
      card:
        - height: 50px
        - width: 20px
      size: 100%
    name: Verwarming
  - type: custom:mushroom-cover-card
    entity: cover.woonkamer_covers
    name: Rolluiken
    icon: mdi:window-shutter-open
    show_buttons_control: false
    show_position_control: true
    fill_container: false
    hide_state: false
    tap_action:
      action: toggle

Maybe someone can point me in the right direction here.
Thanks a lot!

Cheers,
Per

2

No ideas? Anybody?

3

Quick and dirty (not sure it works): make it 3 instead of 1 vertical stack inside the horizontal stack?

5

Woow…I should have thought of that myself :slight_smile: Thanks for this…it does work

1 Like