Card-mod font size

Configuration Frontend
1

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?

Thank you for your time and help.

show_current: true
show_forecast: false
type: weather-forecast
entity: weather.home
theme: ING Dark
card_mod:
  style: |
    ha-card {
      color: red;
      font-size: 100px;
    }
1 Like
2

Better to ask these questions in the already created dedicated thread.
Go to the thread - 1st post - find link at the bottom - find your styles

3

Same issue, and I can’t find the dedicated thread you mentioned. Please help find it?

4
5

Awesome thanks.
That thread led me to your very helpful post here 🔹 Card-mod - Add css styles to any lovelace card - #1186 by Ildar_Gabdullin
With examples.

6

I believed that you were interested in a weather-forecast card which is here.
Whole list is here.

7

I am not a CSS or web dev, I can’t get the font size to increase. The color changes. Did you figure out how to get the size to change?

8

Read one post above.

9

Thanks for nothing, I’m sure you were well intentioned in responding.

1 Like
10

Think again and check a solution which was proposed. And keep your sarcasm for yourself.

11

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;
    }
12

I’m having the same issue… anything under the card mod works except font-size…it changes nothing and no matter how I try to use it it will not change…

Any suggestions, ideas please and Thank you!

- type: custom:mushroom-template-card
        entity: sensor.john_s_fold_4_battery_level
        layout: horizontal
        icon_color: White
        fill_container: true
        name: Fold4
        icon: mdi:map-marker
        hide_name: true
        primary: "Where is John..."
        secondary: " {{ states('sensor.john_s_fold_4_geocoded_location') }}"
        card_mod:
          style: |
            ha-card  {
              background-color: {{ 'rgba(147, 227, 215, 0.2)' if is_state('device_tracker.sm_f936u1', 'home') else 'rgba(147, 227, 215, 0.2)' }};
              height:100px !important;
              border: 2px solid white !important;
              font-size: 136px !important;
            }
13

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;
    }