Best resolution for panel mode (Best solution for size problem)

[gabrielmiranda]

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:

Floor plan image not correctly sized

Hi, I have an issue with the image I’m using for my floor plan in Lovelace - even though its resolution is less than the area that is shown on my screen, a part of it needs scrolling down in order to be seen. Is it an aspect ratio thing? How can I make it be visible in its entirety? This is in the web view on my PC, but also on Android if I switch to landscape…on Android portrait it shows a nice miniature version of the card, fitted to the phone width, which is fine. FYI, I’m using the pictur…

Floorplan resizing for different devices

I am trying to set up my first floorplan, and picture-elements in lovelace seem to be the way to go. But is there a away to scale it for mobile, tablet and desktop at the same time? For instance, I tried making one, it works good in the browser (it actually looks wuite ugly, but it shows up as it should :)), but in Arelia, which i use for mobile, it doesn’t even show up Mayby the resolution is to high?

How size images for picture elements

Someone will probably tell me I’m wrong, but I think … The size of the card is defined by the main image, it will take up the full width of the column it’s in. The height is then defined by the ratio between width and height of the main image. To make it smaller, you could put a couple of them in a horizontal layout card, side by side, so they have to share the width of a single column (or put any other card alongside). Or take a look at https://github.com/thomasloven/lovelace-layout-card I…

Lovelace: Sizing the main image of picture-elements

Hi ! I’d like the main image of my picture-elements card (a 2D floorplan) to size according to the size of the display of the viewer, in a responsive manner. How would this be accomplished? I already tried: - title: BG id: bg background: icon: mdi:door-open cards: - type: picture-elements image: /local/images/bg.png style: width: 100% height: 100% elements: ... all kinds of elements go here ... Which didn’t work, even if I expected it to

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:

GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any...

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!

[maxwroc (Maks)]

There is a universal solution for which you don’t need to define multiple media rules e.g.

card_mod:
  style: |
    :host {
      display: flex !important;
      justify-content: center;
      margin: 0 auto !important;
      overflow: hidden;
    }

    #root {
      max-height: 100%;
    }

    :host ha-card {
      background: none;
      height: calc(100vh - 60px);
      width: 100%;
      place-content: center;
      flex-direction: column;
      display: flex;
    }

The only thing you may need to adjust is the :host ha-card width. The number of reduced pixels depends whether you have the top bar.

Edit: I have might posted this too soon… I was testing it on the ha-floorplan and it worked nicely. With picture elements the problem is that all of the “elements” you add are moving