ha-card-weather-conditions
ha-card-weather-conditions copied to clipboard
Why these big numbers?
How i can lower the size of the numbers about temperature?
Actually i have this style, but only since latest release i get those big numbers.
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
}
you need to change the .temp
and .tempc
css classes.
For example:
style: |
.temp {
....
}
.tempc {
....
}
See: https://github.com/r-renato/ha-card-weather-conditions/blob/master/src/ha-style-summary.ts
Ok, can you give me some hints about how to make that number more visible? I am not so good with css... I also tried your examples, but without changing nothing, my card is always the same... Surely i am wrong in something, but don't know where to check...
You need to adjust the font size (e.g.: 49px -> 39px -> ...)
style: |
.temp {
font-size: calc(49px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
.tempc {
....
}
Sorry, but i changed the style in this way:
- type: custom:ha-card-weather-conditions
style: |
ha-card {
font-size: 14px;
font-family: 'Georgia';
font-weight: normal;
}
.icon.bigger {
width: 10em;
height: 10em;
margin-top: -4em;
position: absolute;
left: 0em;
}
.title {
position: absolute;
left: calc(140px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
top: 0.6em;
font-weight: 300;
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
color: var(--primary-text-color);
}
.moon {
position: absolute;
left: calc(115px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
top: calc(63px - (26 - 14) * ((100vw - 300px) / (1600 - 300)));
font-weight: 300;
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
color: var(--primary-text-color);
line-height:20px;
display: inline-block;
}
.temp {
position: absolute;
// top: 0.65em;
font-weight: 300;
font-size: calc(39px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
color: var(--primary-text-color);
right: 1em;
margin-top: 2px;
}
.tempc {
position: absolute;
font-weight: 300;
font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
// font-size: 1.5em;
vertical-align: super;
color: var(--primary-text-color);
right: 1em;
margin-top: -11px;
margin-right: 7px;
}
But nothing changed i have always the same big number... i tried 39px, 29px, 19px but no way... Maybe it's my fault as i told you about my knowledge in css styiling...
This is what i get when changing font-size to 39 from 49px
Same as before...