lukevink
commented
3 years ago Hey there! So yes, for mobile, there is a bit of an issue due to the fact that most mobile phones have a 2x retina screen and I am using "VW" to size them. This means the icons become double the size due to the pixels. Unfortunately this means you will need to change the 2vw on each icon's width and height for mobile, maybe have a different dashboard for mobile.
In my latest code, I created a seperate lovelace for mobile which has the icons in the correct size, and also updated the icons to use button-card.
https://github.com/lukevink/hass-config-lajv/blob/master/ui-lovelace_mobile.yaml
Hi, I'm looking at your big project, very nice. I would like to ask you for some information if you do not disturb.tu to create the page with the floorplan and the menu on the left, as you can see in the video, did you only create a picture element and put everything inside it? I did something similar using a picture element but, when I go to see it on a smartphone, I see the floorplan in the right size and the giant icons. same problem on the pc, if I go to the floorplan page and I zoom the icons become igganti and overhang the floorplan. what do you need to use as code to keep the size of icons and floorplans proportionate in the same way? another user created a custom card by making a vertical stack card with two picture elements. one with the floorplan and another picture element with the menu. in this way the icons do not go on the floorplan even if looking at it on another device such as smartphone the icons become giants. if you can help me you do me a big favor. in case you want to watch my yaml i send it to you.
I am not very experienced don't laugh looking at the code I sent you :-) floorplan.zip