How i can lower the size of the numbers about temperature? <a target

you need to change the .temp and <code class="notrans

You need to adjust the font size (e.g.: 49px -> 39px -> ...) <div class="sni

Sorry, but i changed the style in this way: <div class="snippet-clipboard-content

Why these big numbers? about ha-card-weather-conditions HOT 4 OPEN

r-renato commented on July 28, 2024

Why these big numbers?

from ha-card-weather-conditions.

Comments (4)

r-renato commented on July 28, 2024

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

from ha-card-weather-conditions.

mfabiani53 commented on July 28, 2024

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...

from ha-card-weather-conditions.

r-renato commented on July 28, 2024

You need to adjust the font size (e.g.: 49px -> 39px -> ...)

          style: |
              .temp {
                font-size: calc(49px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
              }
              .tempc {
                ....
              }

from ha-card-weather-conditions.

mfabiani53 commented on July 28, 2024

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...