Hello, I am still a beginner with Home Assistant and dashboards. I have several issues with a horizontal-stack card that integrates two picture-elements cards. The first issue is that the two picture-elements cards are too far apart. When I move them closer together, the images or cards overlap when I reduce the screen size. What could be causing this?
The second issue is that I would like to change the color of the state icons, but it doesn’t seem to work properly. Can someone give me some tips on this?
type: horizontal-stack
spacing: 8px
cards:
- type: picture-elements
image: /api/image/serve/460f1bfa485e16471bf1e7d9ff47ee97/512x512
elements:
- type: state-icon
icon: mdi:battery
entity: sensor.handy_markus_battery_level
style:
top: 5%
right: 5%
width: 20px
height: 20px
- type: state-icon
icon: mdi:home
style:
top: 20%
right: 5%
width: 20px
height: 20px
entity: device_tracker.handy_markus
- type: state-label
entity: person.markus
style:
color: white
font-size: 12px
position: absolute
bottom: 10px
left: 50%
transform: translateX(-50%)
font-weight: bold
text-align: center
pointer-events: none
attribute: friendly_name
card_mod:
style: |
ha-card {
width: 150px;
height: 150px;
border-radius: 15px;
}
- type: picture-elements
image: /api/image/serve/486ba03f5c82b318e6e1d1c7e19704a3/512x512
elements:
- type: state-icon
icon: mdi:battery
entity: sensor.iphone_person2_battery_level
style:
top: 5%
right: 5%
width: 20px
height: 20px
- type: state-icon
icon: mdi:home
style:
top: 20%
right: 5%
width: 20px
height: 20px
entity: device_tracker.iphone_person2
- type: state-label
entity: person.person2
style:
color: white
font-size: 12px
position: absolute
bottom: 10px
left: 50%
transform: translateX(-50%)
font-weight: bold
text-align: center
pointer-events: none
attribute: friendly_name
card_mod:
style: |
ha-card {
width: 150px;
height: 150px;
border-radius: 15px;
}