Problème pour centrer une carte du Dashboard sur écran mobile

Entraide Home Assistant
1

Bonsoir à tous

j’ai un soucis avec ma carte lovelace, je n’arrive pas à trouver comment faire pour la centrer sur l’écran de mon mobile.

IMG_4130
IMG_41301179×2556 479 KB

Voici mon code actuel :

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr 1fr
  grid-template-rows: 150px 150px 150px 200px
  grid-template-areas: |
    "livingroom kitchen "
    "livingroom titi"
    "entry toto"  
    "bedroom newarea"
cards:
  - type: custom:button-card
    icon: mdi:sofa
    name: Livingroom
    view_layout:
      grid-area: livingroom
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 36px 36px 6px 36px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#A8CD9F"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: 500
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:silverware-fork-knife
    name: Kitchen
    view_layout:
      grid-area: kitchen
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 36px 36px 36px 6px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#E1AFD1"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: 500
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:door
    name: Entry
    view_layout:
      grid-area: entry
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 36px 6px 36px 36px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#F9E897"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: 500
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:tab-minus
    name: Salle De Bain
    view_layout:
      grid-area: titi
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_sdb_temperature'].state;
          var hum = states['sensor.temperature_sensor_sdb_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 6px 36px 36px 36px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: center
        - align-self: center
        - background: "#67C6E3"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: center
        - align-self: center
        - text-align: center
        - font-size: 16px
        - font-weight: 500
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: center
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:shower-head
    name: Salle De Bain
    view_layout:
      grid-area: toto
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_sdb_temperature'].state;
          var hum = states['sensor.temperature_sensor_sdb_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 6px 36px 36px 36px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: center
        - align-self: center
        - background: "#67C6E3"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: center
        - align-self: center
        - text-align: center
        - font-size: 16px
        - font-weight: 500
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: center
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:bed-king
    tap_action:
      action: navigate
      navigation_path: "#chambreparents"
    name: Chambre Parents
    view_layout:
      grid-area: bedroom
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_parents_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_parents_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#ed967d"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: 500
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:new-icon
    tap_action:
      action: navigate
      navigation_path: "#newpath"
    name: Nouvelle Carte
    view_layout:
      grid-area: newarea
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#ed967d"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: 500
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px

Pouvez-vous me dire quel code renseigner pour remédier au problème

Merci d’avance :grinning:

Ps : ne faites pas attention aux noms de mon « grid-template-areas » je suis encore en prod :rofl:

2

Salut,

C’est toi qui fixe les dimensions (2 fois 1fr)… Et tes cartes font certainement plus que la moitié de la zone dispo.
Donc c’est pas une problématique de centrage, mais plutôt que ça ne tient pas sur l’affichage du mobile.

3

hello @Pulpy-Luke

Merci de ta réponse, ce matin j’ai recommencé le code de « ZERO » et cela fonctionne maintenant :+1:

IMG_4140
IMG_41401179×2556 176 KB

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 1fr 1fr
  grid-template-rows: 150px 150px 150px 150px
  grid-template-areas: |
    "salon cuisine"
    "salon bathroom"
    "entry bathroom"  
    "bedroom bedroom1" 
cards:
  - type: custom:button-card
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: "#salon"
    name: Salon
    view_layout:
      grid-area: salon
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 36px 36px 6px 36px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#B6A28E"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: bold
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:silverware-fork-knife
    name: Cuisine
    view_layout:
      grid-area: cuisine
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 36px 36px 36px 6px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#E1AFD1"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: bold
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:door
    name: Entry
    view_layout:
      grid-area: entry
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 36px 6px 6px 36px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#F9E897"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: bold
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:shower-head
    name: Bathroom
    view_layout:
      grid-area: bathroom
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 6px 36px 36px 6px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#67C6E3"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: bold
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:bed-king
    name: Bedroom
    view_layout:
      grid-area: bedroom
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 36px 6px 36px 36px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#ed967d"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: bold
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px
  - type: custom:button-card
    icon: mdi:bed-king
    name: Bedroom
    view_layout:
      grid-area: bedroom1
    custom_fields:
      temp: |
        [[[
          var temp = states['sensor.temperature_sensor_chambre_enfants_temperature'].state;
          var hum = states['sensor.temperature_sensor_chambre_enfants_humidity'].state;

          return `
          ${parseFloat(temp).toFixed(0)}°
          <span style="font-size:16px;font-weight:400;opacity:0.6">
          ${parseFloat(hum).toFixed(0)}%
          </span>
          `
        ]]]
    styles:
      card:
        - padding: 8px
        - height: 100%
        - background: var(--gray000)
        - border-radius: 6px 36px 36px 36px
      grid:
        - grid-template-areas: "\"n i\" \"temp temp\""
        - grid-template-rows: 1fr min-content
        - grid-template-columns: min-content 1fr
      img_cell:
        - justify-self: end
        - align-self: start
        - background: "#88C273"
        - border-radius: 100%
        - width: 60px
        - height: 60px
      icon:
        - width: 28px
        - color: black
      name:
        - justify-self: start
        - align-self: start
        - text-align: left
        - font-size: 16px
        - font-weight: bold
        - color: black
        - padding: 14px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 40px
          - line-height: 40px
          - font-weight: 300
          - color: black
          - padding: 0 0 6px 14px