How to adjust column width in horizontal stacks?

[AleXSR7001 (AleXSR700)]

Hello everyone,
I would like to create a simple horizontal stack with a slider plus a vertical stack with 3 buttons. I would like the buttons to be narrower than the slider, so the left horizontal stack card should be e.g. 75 % total width and the vertical stack buttons 25 %.

Is this possible?
I saw that there is a lovelace layout card by thomas loven but that seems very complicated for such a seemingly simple task. I am not that familiar with CSS and mediaquery, so if there is a simpler solution, that would be great

[Ildar_Gabdullin]

The last example:

Card-mod - Add css styles to any lovelace card

Styling vertical-stack (horizontal-) card. Styling a title: [image] Method #1: type: 'custom:mod-card' style: | ha-card { --ha-card-header-color: red; --ha-card-header-font-size: 10px; } card: type: vertical-stack title: Changed font for title cards: - type: entities entities: - entity: sun.sun - entity: sun.sun - type: entity entity: sun.sun Method #2: type: 'custom:mod-card' style: hui-vertical-stack-card$: | .card-header { …

[AleXSR7001 (AleXSR700)]

Thank you @Ildar_Gabdullin

That works perfectly!

Is it possible to make the vertical stack fill the space it has, though? The button height is not adjusted to use the full space available.

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    hui-entities-card {
      margin-left: 0px !important;
      margin-right: 0px !important;
      margin-bottom: 0px !important;
      width: 75%;
      flex: unset !important; 
    }
    mini-graph-card {
      margin-right: 0px !important;
      margin-bottom: 0px !important;
      flex: unset !important; 
    }
card:
  type: horizontal-stack
  cards:
    - type: entities
      title: Living Room
      entities:
        - type: custom:slider-entity-row
          entity: climate.eq_3_living_room
          name: Living Room
          min: 4.5
          max: 23
          step: 0.5
          hide_state: false
          icon: |
            [[[
              if (entity.attributes.temperature == 4.5)
              return "mdi:snowman";
              return "mdi:fire";
            ]]]
      state_color: true
    - type: vertical-stack
      cards:
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 'Off'
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 4.5
              entity_id: climate.eq_3_living_room
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 18 °C
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 18; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 18
              entity_id: climate.eq_3_living_room
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 20 °C
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 20; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 20
              entity_id: climate.eq_3_living_room

It does work, when I remove the title, but then the slider is no longer centered:

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    hui-entities-card {
      margin-left: 0px !important;
      margin-right: 0px !important;
      margin-bottom: 0px !important;
      width: 75%;
      flex: unset !important; 
    }
    mini-graph-card {
      margin-right: 0px !important;
      margin-bottom: 0px !important;
      flex: unset !important; 
    }
card:
  type: horizontal-stack
  cards:
    - type: entities
      entities:
        - type: custom:slider-entity-row
          entity: climate.eq_3_living_room
          name: Living Room
          min: 4.5
          max: 23
          step: 0.5
          hide_state: false
          icon: |
            [[[
              if (entity.attributes.temperature == 4.5)
              return "mdi:snowman";
              return "mdi:fire";
            ]]]
      state_color: true
    - type: vertical-stack
      cards:
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 'Off'
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 4.5
              entity_id: climate.eq_3_living_room
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 18 °C
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 18; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 18
              entity_id: climate.eq_3_living_room
        - type: custom:button-card
          entity: climate.eq_3_living_room
          name: 20 °C
          show_name: true
          show_icon: false
          show_state: false
          state:
            - operator: template
              value: '[[[ return entity.attributes.temperature == 20; ]]]'
              color: rgb(255, 0, 0)
          tap_action:
            action: call-service
            service: climate.set_temperature
            service_data:
              temperature: 20
              entity_id: climate.eq_3_living_room

[Ildar_Gabdullin]

@AleXSR7001

The button height is not adjusted to use the full space available.

Try using grid card or layout-card.

[Ildar_Gabdullin]

@AleXSR7001

but then the slider is no longer centered:

Strange. May be you should look at the layout-card and replace the horizontal-stack…

[AleXSR7001 (AleXSR700)]

I quite like the simplicity of the card-mod. Isn’t the layout-card meant to control the entire dashboard rather than just the content of one card?

[Ildar_Gabdullin]

I am not an expert on layout-card but know that it can do both.