Can help me positioning & scaling elements

my floor plan is malformed on iPad/iPhone/etc

type: picture-elements
elements:
  - type: custom:fluid-level-background-card
    entity: sensor.waterwater
    style:
      z-index: 1
      top: 47.73%
      left: 47.46%
      transform: translate(-50%, -50%)
      width: 52.3740%
      height: 29.8016%
    card_mod:
      style: |
        ha-card {
          text-align: center;
          --ha-card-border-color: transparent !important;
          box-shadow: none !important;
          background: none !important;
          border-radius: 50px;
          overflow: hidden;
        }  
        #container, .container {
          width: 100% !important;
          height: 100% !important;
          position: relative !important;
          border-radius: 0px !important;
          margin: 0 !important;
          opacity: 0.9;
          overflow: hidden;
        }
    fill_entity: switch.water_server_water_switch
    full_value: "100"
    card:
      type: custom:card-templater
      card:
        type: entity
        entity: sensor.waterwater
image: /local/230370980.svg
card_mod:
  style:
    hui-image $: |
      img {
        z-index: 1 !important;
        position: relative !important;
        right: 0px;
        top: 0px;
        width: 100% !important;
        opacity: 1
      }