I have a picture-elements card that displays, battery level, battery state proximity location and distance to home. I’m relatively new to HA and CSS. I had everything pretty good, but wanted to scale the card down and I just cant seem to get one of the icons located properly. the icon in the top left is too far left. See my code below. I’ve played with all the variables and can get it to “move” but not correctly.
type: picture-elements
image: /local/pictures/eric.jpg
elements:
- type: state-label
entity: device_tracker.erics_iphone
style:
left: 0
bottom: 0
pointer-events: none
line-height: .3em
font-size: .75em
background-color: rgba(0,0,0,0.4)
width: 100%
transform: initial
padding: 3px - type: state-label
entity: proximity.home
style:
right: 3px
bottom: 0
pointer-events: none
transform: initial
line-height: .7em
font-size: .75em
padding: 0px
‘–paper-item-icon-color’: white - type: state-label
entity: sensor.erics_iphone_battery_level
title: Eric_battery_level
style:
left: 0
top: 0
padding: 5px
pointer-events: none
transform: initial
line-height: 1em
font-size: .75em - type: state-icon
entity: sensor.erics_iphone_battery_state
style:
right: 0
top: 5%
padding: ‘-5%’
pointer-events: none
transform: translate(-30%, -30%) scale(.5, .5)
line-height: 1em
font-size: .1em
‘–paper-item-icon-color’: white