Make clock font-width grow dynamically

[pkissling]

Currently the font-size of the clock is set to a fixed value. Depending on the resolution and viewport, there is a lot of wasted space.

Task: Find a solution to make the clock font-size grow dynamically with the space of the surrounding div. Options:

• Calculate font-size dynamically based on width of surrounding div
• Render text as svg

[joevberg]

I wonder this. I want to use this on a mounted dash as a clock and the time is too small

[netmanchris]

Let me know if I should open another issue, but It would be great to be able to set the font size of the clock in the YAML definition when adding this card to a dashboard.

In the mean time - Can you point me towards where in the JS file the clock size is statically configured so I can change it manually?

Really appreciate the great work! Loving this card!

[joevberg]

I've tried changing everything in the js to no avail

[pkissling]

hi there,

you can easily change the font size yourself using card-mod:

- type: custom:clock-weather-card
  entity: weather.home
  style: |
    clock-weather-card-today-right-wrap-center {
      font-size: 20rem !important;
    }

[joevberg]

Ty much. I just needed time know what section. Great.

[joevberg]

Ty much. I just needed time know what section. Great. It overlaps the condition and date. I don't need the date. Is it possible to move the condition? Or remove it too?

[pkissling]

- type: custom:clock-weather-card
  entity: weather.tomorrow_io_daily
  style: |
    clock-weather-card-today-right-wrap-center {
      font-size: 7rem !important;
    }
    clock-weather-card-today-right-wrap-top {
      display: none !important;
    }
    clock-weather-card-today-right-wrap-bottom {
      display: none !important;
    }

[joevberg]

Ty

[Cptkex82]

is it possible to, using the above method, separate temperature so its more positioned towards the top left/right? changing the size of the temp and clock makes them go into eachother since they seem bound with the middle part fixed.

[vhardono]

on the same topic, would it be possible to have the day and date rows also aligned to the center instead left/right?

[rchiileea]

you could also change the font with

        clock-weather-card-today-right-wrap-center {
          font-family: "Orbitron";
        } 

[BillyFKidney]

is it possible to, using the above method, separate temperature so its more positioned towards the top left/right? changing the size of the temp and clock makes them go into eachother since they seem bound with the middle part fixed.

I would love to do this as well, just have the temperature (digits) displayed with the time.

[teek541]

I could be dumb, but the above styling didn't change mine at all and yes I have card mod installed.