Picture Elements Card crumbled on Android Smartphone

Hope someone can advice something… I am facing a strange behavior concerning a “Picture Elements Card” on one particular Android Device using “Home Assistant” App.

My configuration is not very special… And in my web browser on a Mac (Google Chrome) it is looking as expected. So on my Android Smartphone (Home Assistant App version 2.1.1-249-full, webview 84.0.4147.111)

BUT on my wifes Android One Smartphone (Android 10, Home Assistant App version 2.1.1-249-full, webview 84.0.4147.111) it looks kinda crumbled…

Anything I can try because like this, HA is quite useless for her… :frowning:

As @tom_l said. The image is missing. Indeed it was missing and the only reason did still work on the other devices is caching :wink:. Btw. trailing slash was also missing and you can append a ?ver=1 (or something else) to trick out the cache…

There is no image on your wife’s phone. Thus no dimensions to calculate % relative positions.

You need to work out why the image is not available on that phone.

I have also noticed that it’s not quite the same on my phone as on the web browser.
Not as bad as your example but enough to offset everything to make icon and text overlap each other.

Edit I just thought of something.
It turns out my issue is the screen size.
If I flip the phone to horizontal then it looks correct.
Perhaps there is not enough room to draw out the whole picture on her phone so it just does not do it.
Try to flip it horizontal.

Thx @tom_l… In the moment I did read your post (btw. very fast reply!!) I realized that little “no picture” icon and that I did play with the background images while back ago… back and forth between 3D and 2D views… anyway:

local/images/DG.png was missing :man_facepalming:

Sometimes its so easy but you just can’t “see” it…

and @Hellis81 you’re right as well. I am facing the same issue here. But I think its something expectable because the form factor (and resolution) is smaller on a mobile device. Thats why I would prefer “panel mode” on mobile but rather stick to “card mode” on desktop. But thats not implemented yet.

THANK you both for solving my issue that quick.

My solution to wanting two different layouts was to create two dashboards. One for mobile devices and one for desktop. You can set the default dashboard for the device in your profile when using the device.

2 Likes