Hello all. I am trying to get my head around using css to customize HA cards.
Wanted to increase the font size of the text in the Weather card.
I installed the card-mod from HACS. I can change the color of the text but not the size.
Would someone be kind enough to show me what I am doing wrong?
Hi,
I noticed that for some reason changing the font size for the .state worked only on my computer’s browser but not on my phone’s companion app until I added !important at the end of the font-size.
ha-card .name-state .state {
font-size: 18px !important;
}
I got this to work in my statistics card by poking around in the inspect elements pane in chrome. I noticed that the value of the card was listed as ‘span.value’. Added this to my card mod and it finally changed font size. I’m still trying to figure out how to align the card name, ‘header’ isn’t doing the trick, but thought I would share progress
type: statistic
icon: []
name: Active Time - Last 7 Days
period:
rolling_window:
duration:
days: 2
stat_type: change
entity: sensor.active_minutes_daily
card_mod:
style: |
ha-card {
text-align: center;
}
ha-card .value {
font-size: 15px;
}
ha-card .measurement {
font-size: 12px;
}