On my right hand weather card i’m unable to get the icon to align with the cloudy text and tempeture.
I’ve been messaing around with padding but i just go around in circles either adding and sutracting padding and ending up in the same place or i end up increasing the overall length so it doesn’t match the clock side
custom_fields:
icon:
- padding-top: 51px
- padding-bottom: -20px
- margin-top: -60px
type: custom:button-card
name: |
[[[ return states['sensor.avergae_temp'].state + "°C" ]]]
label: >
[[[ return states['weather.home'].attributes.temperature + '<span
style="font-size:0.6em">°C</span>' ]]]
show_label: true
custom_fields:
icon: |
[[[
var weather = states['weather.home'].state;
return '<img src = "/local/weather_icons/' + weather + '.svg" width="50" height="50" />'
]]]
weather_home_label: |
[[[
return `<span>${states['weather.home'].state}</span>`;
]]]
styles:
grid:
- grid-template-areas: '"icon weather_home_label n" "icon weather_home_label l"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: min-content min-content
card:
- background: none
- padding: 8px
name:
- justify-self: start
- font-size: 14px
- padding-left: 30px
label:
- justify-self: end
- font-size: 26px
- font-weight: 500
- padding-left: 80px
custom_fields:
icon:
- padding-top: 51px
- padding-bottom: -20px
- margin-top: -60px
weather_home_label:
- justify-self: center
- font-size: 20px
- padding-top: 20px
tap_action:
action: navigate
navigation_path: '#weatherpop'