So First I have pretty much no idea what I am doing.
I would like to change the font size of these to 18 or 20…
If I check Chrome Dev tools the info is located here.
I’ve tried adding this and it’s not working (yes I know this shows 16, I was just trying to make an obvious change so that I know if it was working)
Any pointers to what I am missing?
I have been trying the same with an entities card by using Lovelace card-mod 3 which should work but I have not had any luck. I use Firefox though and that could be a reason. So you might be able to get it to work.
You wrote “vlaue” instead of “value”
hahah. Thanks good eye.
where were you 3 months ago. lol
I am struggling with what seems like a simple task. I have an entity card and I want to change the font size of the attribute on the card.
type: entity
entity: remote.livingroom
attribute: current_activity
card_mod:
style: |
ha-card {
color: red;
font-size: 8px;
}
.span.value {
font-size: 8px;
}
I can do it on an Entities card.
type: entities
entities:
- entity: remote.livingroom
card_mod:
style: |
:host {
font-size: 8px;
}
I have used the Developer Tool in Edge to get the information on the entity card
I need some help in how to properly interpret the CSS data and use it in the card.
Any suggestions?
Thanks
So simple! THANK YOU 
I have some problem with text on a single (of double) column.
It cut the font size. How can I fix it?
I can’t get the font size to change on my cards either. I have tried several things. All without success. Do you have any idea what I am doing wrong?
type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.presence_simulation
icon: mdi:robot-happy
name: Simulation
show_state: false
style: |
:host {
font-size: 8px !important;
}
or
type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.presence_simulation
icon: mdi:robot-happy
name: Simulation
show_state: false
style: |
ha-card {
font-size: 8px !important;
}
or
type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.presence_simulation
icon: mdi:robot-happy
name: Simulation
show_state: false
font-size: 80%
Hi All
Thought I’d add on to this post to see if anyone can help with my issue. I’m trying to increase the font size of a simple entity card displaying temperature. I’ve been reading and searching for something related but have now given up and decided to post my specific issue.
When I use the card-mod code to increase the font size, it just increases the spacing (see screen shots). Can someone please help?!
Screenshot 2022-12-29 235722|690x445
I don’t use entity card anymore, for many things (including replacement for markdown) i use cusotm:button-card. It’s massively adaptable, has tons of functions and it’s, i think, one of most usable cards in HA.
card-mod thread → 1st post → link at the bottom → styles for Entity card
How would I go about changing the title font size of people at home? It appears to be under h1.card-header
bottomCard:
type: custom:layout-card
layout_type: custom:vertical-layout
layout:
max_cols: 1
cardStyle: |
:host {
width: 104% !important;
position: absolute;
bottom: 0%;
left: -2%;
}
.column.cards {
max-width: 100% !important;
}
.cards > :last-child {
margin: 0px !important;
}
column {
font-size: 10px !important;
}
cardOptions:
cards:
- type: entity-filter
entities:
- person.falco1717
state_filter:
- home
card:
type: glance
title: People at home
show_state: false
show_name: false
style: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 4px;
font-size: 1;
border: none;
}
- type: custom:simple-weather-card
backdrop: false
entity: weather.openweathermap
name: ' '
tap_action:
action: navigate
navigation_path: /dashboard-test/meteo
style: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 4px;
font-size: 1vw;
border: none;
}
- type: custom:mini-graph-card
tap_action:
action: none
show:
icon: false
legend: false
name: false
entities:
- sensor.openweathermap_temperature
font_size: 35
update_interval: 15
font_size_header: 9
hours_to_show: 24
points_per_hour: 1
icon: mdi:home-thermometer-outline
color_thresholds:
- color: '#4dd2ff'
value: 0
- color: '#ffa31a'
value: 20
- color: '#ff1a1a'
value: 0
style: |
ha-card, ha-card > div {
padding: 0px !important;
border: none;
}
ha-card > .header.flex > div, ha-card > .states.flex > div {
padding: 5px !important;
font-weight: 500;
}
ha-card > .info.flex > .info__item > .info__item__time {
display: none;
}
ha-card {
background-color: rgba(40,40,40,0);
}
.name > span {
font-weight: 500 !important;
}
I have the same problem… did you manage to fix this?
Can you please post your code?
More call for Dashboard style edit features in the UI me thinks. It’s long overdue.