I’m starting this topic because I came across a problem that is not actually a problem with HA but with how CSS works.
When researching on the topic I found other people with the same problem so I’m sharing the solution I found. Maybe I can help these people:
https://github.com/home-assistant/frontend/issues/10609
The issue is that when using picture-elements in panel mode the image can exceed the height of the screen. Here’s an example:
I used an image with yellow borders to make it easier to see. The resolution of the background image used is 1920x1080. As you can see the border exceeded the screen size and opened a scroll bar.
This happens because of the width and height properties. And not because of some HA bug. I won’t go into these details because it’s something you can easily find on the internet.
The solution to this issue is to add a padding to the card. And for that it will be necessary to install the card-mod:
From there, just inject a padding according to the desired resolutions and that’s it. Here is the code I use:
type: picture-elements
image: /local/img/tablet/home1920x1080.png
style: |
@media (max-width: 870px) and (orientation: landscape) {
/* This value is necessary because from 870px the menu changes to floating */
ha-card {padding: 0 15%;}
}
@media (min-width: 1920px) and (orientation: landscape) {
/* This value is for my PC which is 1920x1080 */
ha-card {padding: 0 10%;}
}
@media (min-width: 2560px) and (orientation: landscape) {
/* This value is for my PC which is 2560x1600 */
ha-card {padding: 0;}
}
}
elements:
You can use whatever resolutions you want according to your devices. I didn’t find a universal css and I didn’t even try because my time is limited so if anyone has something like that just let me know and I’ll include it in the post.
I also don’t know if this is the best solution but it was the only one I could think of.
So here’s a picture of what it looks like on my PC which is 1920x1080:
Here is a picture of what it looks like on my Tablet which is 2560x1600:
And here is a picture of what it looks like on my Smartphone (S9+) which is 658x320:
That’s it. Hope this helps!