Resize the circle to fit the same square like the neighbour cards

[Warter21]

Hi,

Thanks for your great job! I love your card.

Is it possible somehow to resize the circle/square to fit the same size of the card like the neighbor cards?

Thanks,
Szilard

[Warter21]

[tomvanswam]

In your example screenshot, how large (or small) would you like to have the compass?

Resizing the compass is not a big issue, however making sure that when you scale down the compass the texts still fit inside and are readable is difficult.

[Warter21]

If you check the 1st and the 3rd rows, you can see the "normal" height. The compass card stretches the 2nd row. I would like to set the 2nd row to the same height like the 1st or 3rd row.

[tomvanswam]

Ah ok, I did not notice that, so the compass does become smaller when the card is not wide enough, however it does not change in hight currently.
Implementing setting a custom size for the compass will break a lot of stuff, so it will take some time before I'll take this up.

[Warter21]

Thanks a lot!

[rogovst]

This will be useful for me too.

[pupe666]

Here is the code for my card (se attatched text-file). I also atttched a screenshot.

Weather.txt

Let me know if you need anything else.

[TB-SE]

I recommend temporarily using card-mod. Here's the base code:

card_mod:
  style: |
    ha-card {
      transform: scale(1.0,1.0) translate(0%,0%);
      aspect-ratio: 1 / 1;
    }
    div {
      transform: scale(1.0,1.0) translate(0%,0%);
    }

ha-card is of course for the outer part of the card and div is the inner part (basically the actual compass). The aspect ratio value helps to conform the card to other cards, for example when using grid cards. The translate value moves either the card or the compass within the card, so that it can be centered. And lastly, the scale value is shown for the X and Y axis. Not sure how well this works across different browsers and platforms, but there are compatible workarounds available online. Hope this helps!