Dashboard elements not shown correct

[Phoenix-DH]

My Home Assistant version: 2023.12.4

My lovelace configuration method (GUI or yaml): yaml

What I am doing: Nothing, just updated all components to latest

What I expected to happen: Positions will remain the same

What happened instead: Positions of elemts mobed

Description: To be honest, I am not pretty sure if the issue is related to this, but since updating this I got the error in position of the elements, but only on some devices with various browsers or apps.

The still correct one is the HA app on my old iPad:

The not working example is from the Safari browser on the same iPad, but Ingot the same on all my Safari browsers or HA app on Android tablets:

Issue is visible on the lower left corner of the images.

---

By putting an X in the boxes ([]) below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[thomasloven]

Issue template said:

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

# End of code

[Phoenix-DH]

This is the responsible code:

######################### Minigraph to show temperature inside and out #########################

  - type: "custom:mini-graph-card"
    entities:
      - sensor.gartentreppe_temperature
      - sensor.esszimmer_temperature
    show:
      icon: true
      legend: false
      name: true
    color_thresholds:
      - color: "#4dd2ff"
        value: 10
      - color: "#ffa31a"
        value: 15
      - color: "#ff1a1a"
        value: 20
    icon: "mdi:home-thermometer-outline"
    style: |
      :host {
        left: 11.6%;
        top: 92.9%;
        width: 23.5%;
        overflow: hidden;
        height: 15%;
        background: none  !important;
        box-shadow: none !important;
      }
      .header {
        font-size: 1vw;
        position: absolute !important;
        width: 5% !important;
        padding: 0 !important;
        right: 20% !important;
        top: 15% !important;
      }
      ha-card {
        background: none  !important;
        padding: 0 !important;
      }
      .icon > ha-icon {
        width:1.8vw !important;
        height:1.8vw !important;
      }
      .state__time{
        font-size:0.9vw !important;
        margin-top: 0.2vw;
        font-weight: 300 !important;
        opacity: 0.4 !important;
      }
      .states {
        font-size: 0.5vw !important;
        padding: 1vw 0vw 0vw 0vw  !important;
        margin: auto !important;
        width: 68%;
      }
    tap_action:
      action: navigate
      navigation_path: /lovelance-floorplan/klima

######################### Mini Weather card #########################

  - type: "custom:simple-weather-card"
    backdrop: false
    entity: weather.openweathermap
    name: " "
    style: |
      :host {
        left: 11.4%;
        top:  85.5%;
        width: 17%;
        height: 7% !important;
        overflow: hidden;
        height: 8.5vw;
        background: none  !important;
        box-shadow: none !important;
        font-size: 1vw !important;
      }
      ha-card {
        background: none  !important;
        box-shadow: none !important;
        flex-flow: row-reverse !important;
        padding: 0 !important;
      }
      .weather__info--add{
        display : none !important;
      }
      .weather__info{
        flex-grow: 1;
        min-height: 0 !important;
        height: 2.4vw;
        margin-left: 0.6vw;
      }
      .weather__icon{
        margin-right:0.5% !important;
        margin-top: -3%;
        width: 2vw !important;
        height: 2vw !important;
        flex: 0 0 2vw !important;
      }
    tap_action:
      action: navigate
      navigation_path: /lovelance-floorplan/wetter

[ildar170975]

This is not MINIMAL code. Besides , it is not formatted as a code. Check other issues as examples, or use the “create new issue” template.

[ildar170975]

You are using two custom cards here. Suggest to check in corresponding repos first before reporting a “bug”.

[thomasloven]

See #332