Hello everyone
I have a problem with my lovelace card, I can’t find how to center it on my mobile screen.
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
Can you tell me what code to enter to fix the problem
Thanks in advance 
Ps: don’t pay attention to the names of my “grid-template-areas” I’m still in production 