Vertical-Stack

Configuration
1

Hello,

I’m trying to fix a problem were 2 cards show underneath eachother. On my tablet it’s nicer to have them next to eachother.

I tried to edit it in the main “big” file. The plain configuration editor, but can’t find how to fix it.

This is the part of the code i’m talking about.

  - background: var(--background-image)
    icon: 'mdi:brightness-6'
    title: Brightness
    badges: []
    cards:
      - type: horizontal-stack
        cards:
          - type: light
            entity: light.staande_lamp
            color_type: card
            color: 'rgb(164, 213, 222)'
            name: Bank
            icon: 'mdi:sofa'
            size: 50%
            styles:
              card:
                - height: 150px
          - type: light
            entity: light.dressoir_lamp
            color_type: card
            color: 'rgb(164, 213, 222)'
            name: Dressoir
            icon: 'mdi:lamp'
            size: 50%
            styles:
              card:
                - height: 150px
          - type: light
            entity: light.tv
            color_type: card
            color: 'rgb(164, 213, 222)'
            size: 50%
            name: TV
            icon: 'mdi:led-strip-variant'
            styles:
              card:
                - height: 150px
      - type: horizontal-stack
        cards:
          - type: light
            entity: light.shelly_shdm_1_db2fb3
            color_type: card
            color: 'rgb(164, 213, 222)'
            name: Keuken
            icon: 'mdi:microwave'
            size: 50%
            styles:
              card:
                - height: 150px
          - type: light
            entity: light.plafondlamp
            color_type: card
            color: 'rgb(164, 213, 222)'
            name: Plafond
            icon: 'mdi:vanity-light'
            size: 50%
            styles:
              card:
                - height: 150px
          - type: light
            entity: light.shelly_shdm_1_db32e6
            color_type: card
            color: 'rgb(164, 213, 222)'
            size: 50%
            name: Eettafel
            icon: 'mdi:table-chair'
            styles:
              card:
                - height: 150px
2

The cards auto position themselves based on the screen size. So the code doesn’t think it fits side by side. If you want to override it, you’d need to use the custom layout card.