Button Card et affichage

Bonjour à tous

Mes meilleurs vœux pour 2024 :checkered_flag:

J’ai commencé par effectuer un Dashboard pour le téléphone mais j’ai un souci de positionnement de la seconde ligne, comment réduire l’écart entre les 2 lignes.

Voici l’image
image

le code

square: true
type: grid
columns: 3
cards:
  - type: custom:button-card
    tap_action:
      action: navigate
      navigation_path: /dashboard-good/garage
    name: Garage
    size: 50%
    icon: mdi:garage-variant-lock
    styles:
      icon:
        - transform: rotate(0deg)
        - left: 30px
        - top: 5px
        - color: white
        - opacity: 0.5
      name:
        - color: black
        - top: 10px
        - left: 5px
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: radial-gradient(at right top, #B9E0FF, #3290DB);
          font-weight: bold;
        }
  - type: custom:button-card
    tap_action:
      action: navigate
      navigation_path: /dashboard-good/salon
    name: Salon
    size: 50%
    icon: mdi:television
    styles:
      icon:
        - transform: rotate(0deg)
        - left: 30px
        - top: 5px
        - color: black
        - opacity: 1
      name:
        - color: black
        - top: 10px
        - left: 5px
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: radial-gradient(at right top, #D6D661, #D19040);
          font-weight: bold;
        }
  - type: custom:button-card
    tap_action:
      action: navigate
      navigation_path: /dashboard-good/sejour
    name: Séjour
    size: 50%
    icon: mdi:table-chair
    styles:
      icon:
        - transform: rotate(0deg)
        - left: 30px
        - top: 5px
        - color: white
        - opacity: 0.5
      name:
        - color: black
        - top: 10px
        - left: 5px
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: radial-gradient(at right top, #D7CBE7, #DAC4AE);
          font-weight: bold;
        }
  - type: custom:button-card
    tap_action:
      action: navigate
      navigation_path: /dashboard-good/volets
    name: Volets
    size: 50%
    icon: mdi:window-shutter
    styles:
      icon:
        - transform: rotate(330deg)
        - left: 25px
        - top: 10px
        - color: white
        - opacity: 0.5
      name:
        - color: black
        - top: 10px
        - left: 5px
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: radial-gradient(at right top, #A0AAB2, #6E7880);
          font-weight: bold;
        }

mon souhait

image

Merci d’avance

Salut @David

En passant « square » à « false » :

1 « J'aime »

Merci beaucoup c’était ça.
Bonne journée et à bientôt, j’en suis sur :wink:

De rien :wink:

Bonne journée à toi !!!