Everytime I set the height of a card I get a huge gap at the bottom. I tried setting padding to 0% and margin to 0% but nothing works…If I don’t set the height the card becomes to big.
Is there a way to fix this?
styles:
card:
- font-size: 20px
- color: green
- height: 100px
- padding-bottom: 0%
- padding-top: 0%
Upgrade to the latest button-card, this is already fixed.
What is the parent card in this setup?
This is the start of the yaml:
title: Irrigation
icon: mdi:water-pump
cards:
- type: vertical-stack
cards:
- type: 'custom:button-card'
entity: timer.irrigation_timer
show_state: true
show_label: false
show_icon: false
show_name: false
aspect_ratio: 2/1
state_display: '[[[ if (entity.state === "idle") return "Irrigation is OFF"; else return null ]]]'
styles:
card:
- font-size: 20px
- color: green
- margin: 0%
- type: 'custom:button-card'
entity: script.irrigate
name: Irrigate All
aspect_ratio: 4/1
show_icon: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.irrigate
confirmation:
text: Are you sure you want to start all sprinklers?
styles:
card:
- font-size: 20px
- height: 100px
- padding-bottom: 0%
- padding-top: 0%
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: switch.irrig_front
icon: mdi:arrow-decision-outline
aspect_ratio: 1/1
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.irrig_front
confirmation:
text: Are you sure you want to start Front Yard?
double_tap_action:
action: call-service
service: switch.turn_off
service_data:
entity_id: switch.irrig_front
confirmation:
text: Are you sure you want to stop Front Yard?
styles:
card:
- font-size: 12px
Don’t forget to clear your cache. Also if you use HACS, refresh the page twice, at least.
OK fixed it.
I guess it was aspect_ratio vs height? You can’t specify both at the same time 
Yeah I removed aspect ratio and it started to play nice
Btw out of curiosity is there a way to use a gif within a card? Or any animated image?
Yes, just use your gif as the entity_picture, or in any CSS property which supports an image (like background for example).
Hey there, just another noob question:
How could i align the icon left?
I tried
aspect_ratio: 1/0.3
color: 'rgb(47, 186, 229)'
icon: 'fas:couch'
label: >
[[[ return states['sensor.heizung_wohnzimmer_temperature'].state + '°C / ' +
states['sensor.heizung_wohnzimmer_humidity'].state + '%' ]]]
name: Wohnzimmer
show_label: true
size: 40%
styles:
card:
- color: '#101012'
- padding-top: 0%
- align: left
label:
- color: '#adadb7'
- font-size: 13px
- padding-top: 5px
name:
- justify-self: center
- margin-bottom: 5%
- font-size: 18px
- font-weight: bold
- font-family: 'Roboto,sans-serif'
tap_action:
action: navigate
navigation_path: /lovelace/wohnzimmer
type: 'custom:button-card'
But align: lleft does not affect the icon. I’m neither a HA nor a CSS expert.
Could you help me? 
Nic
add icon: under styles: and use justify-self: start
styles:
icon:
- justify-self: start
Hi,
i tried
aspect_ratio: 1/0.3
color: 'rgb(47, 186, 229)'
icon: 'fas:couch'
label: >
[[[ return states['sensor.heizung_wohnzimmer_temperature'].state + '°C / ' +
states['sensor.heizung_wohnzimmer_humidity'].state + '%' ]]]
name: Wohnzimmer
show_label: true
size: 100%
styles:
card:
- color: '#101012'
icon:
- justify-self: start
name:
- justify-self: center
- margin-bottom: 5%
- font-size: 18px
- font-weight: bold
- font-family: 'Roboto,sans-serif'
tap_action:
action: navigate
navigation_path: /lovelace/wohnzimmer
type: 'custom:button-card'
But the “couch” icon is still in the middle
what about using the layout parameter/options to put the icon and state horizontally aligned and the state below?
layout: icon_state
Sorry i meant label below
Perhaps I don’t know what you mean when you say you want it to the left. Could you please screenshot your card and visually explain what you want?
Hey RomRider,
would there be any future left for this thought we once dreamt about…
Don’t think I’ve seen a definitive Njet in this thread further down, so my hopes are still up 
Wouldn’t layout-card do the trick here?
That should work (this is top left, but remove one line or the the other to have it only left or top) :
styles:
img_cell:
- justify-content: start # horizontal
- align-items: start # vertical
I’ve been trying to do the same, and I just can’t get it to work no matter what I try.
The red border is around the img_cell and the green border is around the icon:
img_cell:
- justify-content: start # horizontal
- align-items: start # vertical
- width: 40px
- height: 40px
- border: 1px dashed red
icon:
- height: 24px
- width: 24px
- border: 1px dashed green
I’m trying to get the thermometer to be hard left against the green border. Tried playing around with the grid column size, that moves things around, but the icon is always centered in the green border … I am sure its just me, but thought I’d mention it as well.
Not something possible as the viewPort of the icon svg is a square and the icon is centered inside (using preserveAspectRatio but it’s not a CSS property). That’s how mdi icons are defined. 