State-label in Picture Element being inconsistent in every mode

[budimanjojo]

Hello, I’m working to create my floorplan using picture element. So far so good, until I got this problem while trying to use state-label. The preview window doesn’t match the real display at all, and every device I try giving me different look for it. Here’s the screenshot of it in preview mode (look at how big it is in the preview):

And here’s the screenshot of it in the real dashboard:

And here’s the screenshot of it in my phone:

I have to make it so big to even show it in proper size in the dashboard. But the problem is the inconsistency of it being shown. Look at how the other elements are in their places no matter how big/small the screen is because I’m using panel mode with percentage based positioning. Is there something I do wrong here? Or maybe that’s how state-label element work?
Here’s the code of my date and time element:

  - type: state-label
    entity: sensor.time_formatted
    tap_action: none
    hold_action: none
    double_top_action: none
    style:
      top: 5%
      left: 50%
      width: 100%
      font-size: 300%
      text-align: center
      font-weight: bold
      font-family: frijole
  - type: state-label
    entity: sensor.date_formatted
    tap_action: none
    hold_action: none
    double_top_action: none
    style:
      top: 10%
      left: 50%
      width: 100%
      text-align: center
      font-weight: bold
      font-family: frijole

[TazUk]

try using em for your font size to provide a unit to display size (CSS Units)

e.g.
`font-size: 1.2em

You’ll need to experiment to get the appropriate sizing for all mediums.

[budimanjojo]

Thanks for replying, unfortunately it doesn’t fix the problem. Now, the preview window and my phone looks the same but my browser is still displaying really small text. I already tried refreshing cache in the browser. Very strange