Trying to narrow a horizontal card

Configuration Frontend
1

I have a horizontal card and I’m trying to narrow the width of the up and down arrows, but I’m ending up with empty space that I can’t get rid of. Grateful for any help please.

type: horizontal-stack
cards:
  - type: custom:mod-card
    style: |
      ha-card {
        width: 100%;
        height: 100%;
      }
    card:
      type: picture-elements
      elements:
        - type: state-label
          entity: input_number.landing_target_temp
          style:
            top: 68%
            left: 50%
            font-size: 20px
            font-weight: bold
        - type: state-label
          entity: sensor.landing_temperature
          style:
            top: 20%
            left: 53%
            font-size: 20px
            font-weight: bold
      image: /api/image/serve/5b1d02508c1660163795a9b27515fe04/512x512
  - type: custom:mod-card
    style: |
      ha-card {
        width: 100%;
        height: 100%;
      }
    card:
      show_name: true
      show_icon: true
      type: button
      tap_action:
        action: toggle
      entity: switch.bedroom_2_heater
      name: Heater
  - type: custom:mod-card
    style: |
      ha-card {
        width: 50%;
        height: 100%;
      }
    card:
      show_name: false
      show_icon: true
      type: button
      icon: mdi:arrow-collapse-up
      tap_action:
        action: perform-action
        target:
          entity_id: input_number.landing_target_temp
        perform_action: input_number.increment
        data: {}
  - type: custom:mod-card
    style: |
      ha-card {
        width: 50%;
        height: 100%;
      }
    card:
      show_name: false
      show_icon: true
      type: button
      icon: mdi:arrow-collapse-down
      tap_action:
        action: perform-action
        target:
          entity_id: input_number.landing_target_temp
        perform_action: input_number.decrement
        data: {}

Screenshot from 2025-01-26 19-29-55

2

What you could do is a horizontal stack or grid of three, where the third element is another horizontal stack with the buttons.

3

Ah. Didn’t know I could do that. I’ll give it a try.

4

I now have a slightly different problem. The cards have gone a little taller and filled the width of the section, instead of narrowing the section itself. How do I narrow the section so there is effectively the width of three buttons instead of 4 please?

5

then use a grid card with 4 colums, where the third cell is the horizontal stack with the two smaller buttons.

1 Like
6

Thank you.

1 Like