Text size shrinks in Picture Elements Card on mobile

I have a few Picture Element Cards on my front-end with text overlaid. It looks fine on desktop but shrinks in the mobile app. How can I fix this?

  - aspect_ratio: '1'
    elements:
      - entity: sensor.time
        style:
          color: white
          font-size: 4vw
          font-weight: normal
          left: 27%
          margin: 50px
          position: absolute
          top: 20%
        type: state-label
      - entity: sensor.date
        style:
          color: white
          font-size: 1.5vw
          left: 50%
          top: 70%
        type: state-label
    image: /local/pictures/Wallpapers/gray_4x2.jpg
    type: picture-elements

Desktop

1 Like

That means 1.5 viewport width. Essentially means it will change size based on the size of the containing element. In this case, it means the card. Specifically width.

You can try using:

      font-size: 4vmax

That may get you a larger size.

First thing I notice in general is that your icons are HUGE on mobile.

What are you using to access this on mobile?

2 Likes

I had this in reverse, my mobile view showed state-labels bigger than desktop. Used the font-size: 1.5vw and all is good now, you learn something new every day on here. Thanks @Jsreb @petro

@petro so ‘vmax’ didn’t fix it completely. I’ve had the best luck with ‘em’, ‘px’, and ‘pt’. However, I still have alignment problems. It’ll be centered on the desktop but hanging off the edge in mobile. Do you have any tips for centering text?

To your point about the icons being huge, I think they look big because the picture is cropped. This is just the iOS app. I have three columns on this page. That black/gray card is only half the width of the first column and therefore half the width of the phone screen.

Why are you using the picture elements card for this then? You can use the custom:button-card which has way more CSS control. And everything is always centered. Just my 2 cents.

Not with the picture entity, sorry!

Good call. I didn’t think to use the button-card. I have other cards with text overlaid on pictures. It looks like the button-card will work for those too.

1 Like

Hi, sorry for re-opening… Is there any option to “stop the text shrink/alignment” from “fitting below” the icon? I mean for longer entity names every word is below each other for longer names

Example:

ICON
Garden
Front
Motion
Sensor
Left

Would like to be able to do like:

       ICON
 Garden Front
Motion Sensor
       Left