Harmony remote (custom-cards / button-card)

Configuration Frontend
1

Hi.
To start with i am new to homeassistant and trying to learn yaml.
My next project is to build a card with buttons to control command on my harmony.
I have installed GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant. My problem is how to place the buttons inside the card. Now the buttons is on top of eachother.

Can someone give me a hint what i´m missing? Or is there a smarter way to do this?

type: horizontal-stack
cards:
  - type: custom:button-card
    styles:
      card:
        - width: 80px
        - height: 120px
    color: auto
    color_type: card
    icon: mdi:volume-plus
    size: 40%
    aspect_ratio: 1/1
    action: service
    service:
      domain: remote
      tap_action:
        action: send_command
        data:
          entity_id: Apple TV 4
          device: 63537456
          command: VolumeUp
  - type: custom:button-card
    styles:
      card:
        - width: 120px
        - height: 80px
    color: auto
    color_type: card
    icon: mdi:volume-minus
    size: 40%
    aspect_ratio: 1/1
    action: service
    service:
      domain: remote
      tap_action:
        action: send_command
        data:
          entity_id: Apple TV 4
          device: 63537456
          command: VolumeDown

harmony
harmony996×848 53 KB

2

This is most likely a visualization error. Just save the card and it should look correct on your view.

3

Have tried to save and restarted the server but i shows up the same way?

4

Ah I see your error, you have an aspect ratio applied and you’re adjusting the style height and width. Use the aspect ratio to set the height and width if you want to take advantage of the automatic placement. Don’t adjust the style card height and width.

5

Thanks!! I will try this!