Aligne custom button-card in grid lovelance

Hi,
I am trying to aligne my custom:button-card in my lovelance grid but when i do it like in the example the size of the clickable button is the one i swt in the params but the background of the button becomes very small
Is there a possibility to fix that

It looks like this:
1000036696

It should look like this:
1000036694

type: custom:button-card
entity: script.kodi_quit
name: Kodi Off
icon: mdi:power
layout: icon_name_state
styles:
  card:
    - background-color: var(--card-background-color)
  icon:
    - color: |
        [[[ 
          if (states['media_player.kodi'].state === 'idle') {
            return 'var(--accent-color)';
          } else if (states['media_player.kodi'].state === 'playing') {
            return 'var(--accent-color)';
          } else if (states['media_player.kodi'].state === 'paused') {
            return 'var(--accent-color)';
          } else {
            return 'var(--primary-color)';
          }
        ]]]
  name:
    - color: |
        [[[ 
          return states['media_player.kodi'].state === 'playing' 
            ? 'white' 
            : 'var(--primary-text-color)'; 
        ]]]
tap_action:
  action: toggle
layout_options:
  grid_columns: 1
  grid_rows: 2
show_state: false

main card-mod thread → 1st post → link at the bottom titled “fantastic” → custom:button-card → adapt to sections

1 Like