I have a scaling problem with text on my dashboard

Configuration Frontend
1

I have a scaling problem with text on my dashboard.
The first screenshot shows how the dashboard looks on my desktop.
The second screenshot shows how it looks on my phone.
The text strings in the sidebar do not scale.
They are state-labels inside a panel.

      - title: Next West Ham Game
        entity: sensor.west_ham_opponent
        style:
          top: 54%
          left: 3%
          flex-wrap: wrap
          color: white
         font-size: 16px
          font-weight: bold
          text-align: left
          font-family: Times New Roman,Century
          max-width: 1px
        type: state-label

I tried specifying various things, such as font-size or width:, but I could not find anything that made a difference.
Does anyone know of a way to modify this so that the text scales? Or, maybe there is a custom card that handles text better?

Screen Shot 07-14-24 at 08.06 PM.PNG
Screen Shot 07-14-24 at 08.06 PM.PNG1895Ă—1076 140 KB

Screenshot_2024-07-14-20-05-10
Screenshot_2024-07-14-20-05-101920Ă—1080 147 KB

2

You can use transform in the style section.

      - title: Next West Ham Game
        entity: sensor.west_ham_opponent
        style:
          top: 54%
          left: 3%
          flex-wrap: wrap
          color: white
          transform: scale(2,2)
         font-size: 16px
          font-weight: bold
          text-align: left
          font-family: Times New Roman,Century
          max-width: 1px
        type: state-label

perhaps that works for you?

3

Hi, try using vw instead of pixel in the font size. vw units adjust based on the browser viewport size

4

Check options under “styles” - they are misaligned.

6

Thanks. That works perfectly. I have been away and didn’t get to try it earlier.

1 Like