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

Configuration Frontend
1

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?

1 Like
2

The card has no context or relationship to the card you place it in. Therefore you cannot base it’s size off the card it’s in. You’d be able to do it, but you’d have to fork the custom:button-card and make a special scenario where it grabs the parents size.

If you just want to change the size and keep it a static height and witdh, modify the card height and width inside the styles->card. The size attribute itself only sizes the icon.

3

Thanks.
another (related) question.
Is the text in the card could change it size according to the card or view?
I don’t care about “button card” specifically. any card or element type that can dynamically change is good for me.

4

How do you fork the custom:button-card? Can you write out the code? Thanks so much!