Bar card in picture elements takes up no space

[HeedfulCrayon]

Having a bar card inside a picture-elements card makes the card have a width and height of 0, and manually setting a width and height makes it so the result can only look good on desktop or mobile, not both

Desktop:

Mobile:

[VAFS001]

How did you get the white icons? Is that a theme or did you style them?

[HeedfulCrayon]

@VAFS001 Here is my card config for the NAS display. I have changed my dashboard quite a bit since originally posting this issue

type: picture-elements
image: /local/images/DS916plus.png
style: |
  ha-card {
    --drive-1-color: 
    {% if states("sensor.nas_drive_1_temperature") | float > 50 %}
      Red
    {% elif states("sensor.nas_drive_1_temperature") | float > 40 %}
      Yellow
    {% else %}
      #d3fa37
    {% endif %};
    --drive-2-color: 
    {% if states("sensor.nas_drive_2_temperature") | float > 50 %}
      Red
    {% elif states("sensor.nas_drive_2_temperature") | float > 40 %}
      Yellow
    {% else %}
      #d3fa37
    {% endif %};
    --drive-3-color: 
    {% if states("sensor.nas_drive_3_temperature") | float > 50 %}
      Red
    {% elif states("sensor.nas_drive_3_temperature") | float > 40 %}
      Yellow
    {% else %}
      #d3fa37
    {% endif %};
    --drive-4-color: 
    {% if states("sensor.nas_drive_4_temperature") | float > 50 %}
      Red
    {% elif states("sensor.nas_drive_4_temperature") | float > 40 %}
      Yellow
    {% else %}
      #d3fa37
    {% endif %};
    --drive-1-status: 
    {% if states("sensor.nas_drive_1_status") != "normal" %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-2-status: 
    {% if states("sensor.nas_drive_2_status") != "normal" %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-3-status: 
    {% if states("sensor.nas_drive_3_status") != "normal" %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --drive-4-status: 
    {% if states("sensor.nas_drive_4_status") != "normal" %}
      Red
    {% else %}
      #d3fa37
    {% endif %};
    --update-status: 
    {% if states("binary_sensor.nas_update_available") == 'on' %}
      #d3fa37
    {% else %}
      #44729e
    {% endif %};
    --security-status: 
    {% if states("binary_sensor.nas_security_status") == 'off' %}
      #d3fa37
    {% else %}
      #ff0000
    {% endif %};
    --volume-status: 
    {% if states("sensor.nas_volume_1_status") == 'normal' %}
      #d3fa37
    {% else %}
      #ff0000
    {% endif %};
  }
elements:
  - type: state-icon
    entity: binary_sensor.nas_update_available
    style:
      left: 93%
      top: 55%
      '--paper-item-icon-color': var(--update-status)
  - type: state-icon
    entity: sensor.nas_drive_1_status
    style:
      left: 89.5%
      top: 22%
      transform: translate(-50%, -50%) scale(0.8, 0.8)
      '--paper-item-icon-color': var(--drive-1-status)
  - type: state-icon
    entity: sensor.nas_drive_2_status
    style:
      left: 89.5%
      top: 29%
      transform: translate(-50%, -50%) scale(0.8, 0.8)
      '--paper-item-icon-color': var(--drive-2-status)
  - type: state-icon
    entity: sensor.nas_drive_3_status
    style:
      left: 89.5%
      top: 36%
      transform: translate(-50%, -50%) scale(0.8, 0.8)
      '--paper-item-icon-color': var(--drive-3-status)
  - type: state-icon
    entity: sensor.nas_drive_4_status
    style:
      left: 89.5%
      top: 43%
      transform: translate(-50%, -50%) scale(0.8, 0.8)
      '--paper-item-icon-color': var(--drive-4-status)
  - type: state-label
    entity: sensor.nas_drive_1_temperature
    style:
      left: 96%
      top: 25.5%
      font-size: 70%
      color: var(--drive-1-color)
  - type: state-label
    entity: sensor.nas_drive_2_temperature
    style:
      left: 96%
      top: 32.5%
      font-size: 70%
      color: var(--drive-2-color)
  - type: state-label
    entity: sensor.nas_drive_3_temperature
    style:
      left: 96%
      top: 39.5%
      font-size: 70%
      color: var(--drive-3-color)
  - type: state-label
    entity: sensor.nas_drive_4_temperature
    style:
      left: 96%
      top: 46.5%
      font-size: 70%
      color: var(--drive-4-color)
  - type: state-icon
    entity: binary_sensor.nas_security_status
    style:
      left: 16%
      top: 11%
      '--paper-item-icon-color': var(--security-status)
  - type: state-label
    entity: binary_sensor.nas_security_status
    prefix: 'Security: '
    style:
      left: 16%
      top: 18%
      font-size: 80%
  - type: state-icon
    entity: sensor.nas_volume_1_status
    style:
      left: 34%
      top: 11%
      '--paper-item-icon-color': var(--volume-status)
  - type: state-label
    entity: sensor.nas_volume_1_status
    prefix: 'Volume: '
    style:
      left: 34%
      top: 18%
      font-size: 80%
  - type: state-icon
    entity: sensor.nas_volume_1_used_space
    style:
      left: 52%
      top: 11%
  - type: state-label
    entity: sensor.nas_volume_1_used_space
    prefix: 'Used: '
    style:
      left: 52%
      top: 18%
      font-size: 80%
  - type: state-icon
    entity: sensor.nas_volume_1_total_size
    style:
      left: 70%
      top: 11%
  - type: state-label
    entity: sensor.nas_volume_1_total_size
    prefix: 'Total: '
    style:
      left: 70%
      top: 18%
      font-size: 80%
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.nas_cpu_load_total
        name: CPU
    align_icon: left
    show:
      fill: false
      icon: false
      state: true
      name: true
    align_state: center
    font_size: 60
    animate: true
    hours_to_show: 6
    points_per_hour: 12
    refresh_interval: 30
    style: |-
      :host {
        left: 44%;
        top: 40%;
      }
      ha-card {
        background: transparent;
        box-shadow: none;
      }
  - type: custom:bar-card
    entities:
      - entity: sensor.nas_volume_1_used
        name: Disk Usage
        positions:
          icon: inside
          name: inside
          indicator: 'off'
        icon: mdi:harddisk
        animation:
          state: 'on'
        severity:
          - from: 0
            to: 50
            color: '#40bf40'
          - from: 51
            to: 80
            color: '#ff7b00'
          - from: 81
            to: 100
            color: '#bf4040'
      - entity: sensor.nas_memory_usage_real
        name: Memory
        positions:
          icon: inside
          name: inside
          indicator: 'off'
        icon: mdi:memory
        animation:
          state: 'on'
        severity:
          - from: 0
            to: 50
            color: '#40bf40'
          - from: 51
            to: 80
            color: '#ff7b00'
          - from: 81
            to: 100
            color: '#bf4040'
      - entity: sensor.nas_upload_throughput
        name: Network Up
        positions:
          icon: inside
          name: inside
          indicator: 'off'
        icon: mdi:upload-network
        max: 125000
        animation:
          state: 'on'
        severity:
          - from: 0
            to: 60000
            color: '#40bf40'
          - from: 60001
            to: 100000
            color: '#ff7b00'
          - from: 100001
            to: 125000
            color: '#bf4040'
      - entity: sensor.nas_download_throughput
        name: Network Down
        positions:
          icon: inside
          name: inside
          indicator: 'off'
        icon: mdi:download-network
        max: 125000
        animation:
          state: 'on'
        severity:
          - from: 0
            to: 60000
            color: '#40bf40'
          - from: 60001
            to: 100000
            color: '#ff7b00'
          - from: 100001
            to: 125000
            color: '#bf4040'
    height: 25px
    width: 350px
    style: |-
      :host {
        left: 44%;
        top: 72%;
      }
      bar-card-value {
        color: white;
        text-shadow: 1px 1px #0005;
      }
      bar-card-name {
        color: white;
        text-shadow: 1px 1px #0005;
      }
      ha-icon {
        color: white;
      }
      ha-card {
        padding: 0px;
        background: transparent;
        box-shadow: none;
      }
      bar-card-current, bar-card-backgroundbar, bar-card-currentbar {
        border-radius: 5px;
      }

[VAFS001]

Thank you!

I will give these css settings a try.

[niighthawk]

@HeedfulCrayon did you find a way to get it good on different desktop/mobile ?

[HeedfulCrayon]

@niighthawk nope. Haven't had time to try