Changing "button-card" size in "picture-elements"

@AmitMa wrote:

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?

Posts: 2

Participants: 2

Read full topic