Hi.
I created this card using button-card:
type: 'custom:button-card'
color: '#5DAEED'
entity: light.kitchen_led_light
icon: 'mdi:fire'
name: Kitchen Led
show_state: true
size: 30%
state:
- value: 'off'
styles:
card:
- background-color: '#3A3F43'
icon:
- color: '#747980'
name:
- color: '#747980'
state:
- color: '#747980'
- font-weight: bold
- value: 'on'
spin: true
styles:
card:
- width: 200px
- height: 200px
- border-radius: 10%
- background-color: '#D4D4D4'
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- margin-top: '-15%'
- margin-left: '-30%'
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 25px
- font-family: Candara
- color: '#5B5B5B'
state:
- justify-self: start
- padding-left: 10px
- color: '#5B5B5B'
- font-weight: bold
I’m trying to fit the card into “picture-elements” card and I want the “button-card” to change it sizes if the main card change (panel mode on/off, different screen size and etc…)
I tried to change the percentages in “style” section (width: 10%), but it doesn’t really change the size of the “button-card”.
Any help please?