Hi,
Is there any way to customize width of a card in horizontal stack ?
I’d like the first card of the second horizontal stack to be wider. i.e. 70% for this one and 30% for the week number. I tried style: width: 70% but it doesn’t seem to be taken in account there.
Thank you. I sorted it out. Here is a shortened version (I removed entities from yaml to make it easier to read and reuse):
type: horizontal-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: entities
entities:
- entity: light.bureau
name: Chambre
- entity: light.leds_cote_baie
state_color: true
title: Lumières
- type: entities
entities:
- entity: cover.velux_external_cover
name: Velux
title: Stores
state_color: true
- type: entities
entities:
- entity: sensor.netatmo_siviriez_sejour_co2
name: Séjour
title: Comfort
state_color: true
- type: entities
entities:
- entity: sensor.netatmo_siviriez_sejour_temperature
name: Séjour
state_color: true
title: Température
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: entity
entity: sensor.time
name: 'Il est '
state_color: false
- type: entity
entity: sensor.greeting
state_color: true
icon: mdi:timelapse
name: Période
- type: entity
entity: sensor.saisons
name: Saison
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
hui-entity-card:nth-of-type(1) {
flex-grow: 3 !important;
}
hui-entity-card:nth-of-type(2) {
flex-grow: 1 !important;
}
card:
type: horizontal-stack
cards:
- type: entity
entity: sensor.date_long
icon: mdi:calendar-month
name: Nous sommes le
- type: entity
entity: sensor.week
name: Week
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.starfleet
Hi,
Good work - it works beautifully for type: entity.
I am trying to combine this method for type:custom:button-card.
Generally the way works - I tried to substitute the appropriate entries for the CSS, but the cell increment goes proportionally in the height as well as in the width, and not as in your example only in the width.
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
button-card:nth-of-type(1) {
flex-grow: 3 !important;
}
button-card:nth-of-type(2) {
flex-grow: 1 !important;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
name: Test1
styles:
card:
- font-size: 13px
- type: custom:button-card
name: Test2
styles:
card:
- font-size: 13px
Someone may have an idea how to overcome this? 
Regards.
Have you search in this topic ?
It’s a huuuuge thread. I guess with the right keywords, you might find what you need.