Custom button card full width (root element = max-width: fit content problem)

Configuration Frontend
1

Hi there,
I am challenging styling problem, I have button-card that I want to take full width of parent element. What I found so far with dev console, root element has css property “max-width: fit-content”. I need to change that to 100%, but I can edit only css properties of child element (ha-card) after shadow-root.

pomoc-max_width
pomoc-max_width1356×663 174 KB

pomoc-max_width_cil
pomoc-max_width_cil1350×666 140 KB

2

Hi!

You can try like this

type: custom:button-card
styles:
  card:
    - padding: 0
    - border-radius: 0px
    - color: white
  grid:
    - grid-template-areas: '"icon" '
    - grid-template-columns: 100%
    - grid-template-rows: 1fr
custom_fields:
  icon: |
    [[[
         return "your html code"
      ]]]