Hello
I’m fairly new to HA and try to setup a Dashboard.
I am now at a point where i don’t know and cannot find the real answer to solve my problem.
I wanna align the second custom-button-card Standort to the right of the horizontal-stack because it should be in the center of the above person
I tried it with margin-left and then i can make it work on the pc. but when i change the display size or use the mobile app the layout is not rigth because the second button card sticks out of the right.
So now i wanna align the card to the right side, that should solve my problem with the layout and after that i can use the margin-left to center it under the above picture?
I need advice and/or directions where to look or read to solve my problem
Below is my code:
title: Home
views:
- path: default_view
title: Home
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: person.stefan
fill_container: false
primary_info: name
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
secondary_info: state
layout: vertical
icon_type: entity-picture
card_mod:
style: |
ha-card {
--height: 400px;
--icon-size: 100px;
--font-size: 50px;
background: none;
box-shadow: none;
background-color: transparent !important;
margin-left: 0px;
justify-self: center;
}
a {
justify-self: center;
}
a div {
margin-left: 0px !important;
}
:host {
display: grid;
}
- type: custom:mushroom-entity-card
entity: person.stefan
fill_container: false
primary_info: name
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
secondary_info: state
layout: vertical
icon_type: entity-picture
card_mod:
style: |
ha-card {
--height: 400px;
--icon-size: 100px;
--font-size: 50px;
background: none;
box-shadow: none;
background-color: transparent !important;
}
a {
}
a div {
margin-left: 0px !important;
}
- type: horizontal-stack
cards:
- type: custom:button-card
name: Standort
label: null
styles:
card:
- height: 30px
- width: 100px
- margin-left: 60px
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.location_1
- type: custom:button-card
name: Standort1
styles:
card:
- height: 30px
- width: 100px
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.location_1
card_mod:
style: |
ha-card {
margin-left: 0px;
padding: 5px;
justify-self: end;
}
a {
justify-self: end;
}
a div {
margin-left: 0px !important;
}
:host {
display: grid;
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.location_1
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918b_geocoded_location
card_mod:
style: |
ha-card {
background-color: transparent !important;
box-shadow: none;
justify-self: left;
margin-left: 10px;
}
:host {
display: grid;
}
- type: custom:button-card
color_type: blank-card
- type: gauge
entity: sensor.sm_s918b_battery_level
max: 85
needle: false
name: Stefan Akku
segments:
- from: 0
color: '#ff0d00'
- from: 2.5
color: '#ff1a00'
- from: 5
color: '#ff2600'
- from: 7.5
color: '#ff3300'
- from: 10
color: '#ff4000'
- from: 12.5
color: '#ff4c00'
- from: 15
color: '#ff5900'
- from: 17.5
color: '#ff6600'
- from: 20
color: '#ff7300'
- from: 22.5
color: '#ff8000'
- from: 25
color: '#ff8c00'
- from: 27.5
color: '#ff9900'
- from: 30
color: '#ffa600'
- from: 32.5
color: '#ffb200'
- from: 35
color: '#ffbf00'
- from: 37.5
color: '#ffcc00'
- from: 40
color: '#ffd900'
- from: 42.5
color: '#ffe600'
- from: 45
color: '#fff200'
- from: 47.5
color: '#ffff00'
- from: 50
color: '#ffff00'
- from: 52.5
color: '#f2ff00'
- from: 55
color: '#e6ff00'
- from: 57.5
color: '#d9ff00'
- from: 60
color: '#ccff00'
- from: 62.5
color: '#bfff00'
- from: 65
color: '#b2ff00'
- from: 67.5
color: '#a6ff00'
- from: 70
color: '#99ff00'
- from: 72.5
color: '#8cff00'
- from: 75
color: '#80ff00'
- from: 77.5
color: '#73ff00'
- from: 80
color: '#66ff00'
- from: 82.5
color: '#59ff00'
- from: 85
color: '#4dff00'
- from: 87.5
color: '#40ff00'
- from: 90
color: '#33ff00'
- from: 92.5
color: '#26ff00'
- from: 95
color: '#19ff00'
- from: 97.5
color: '#0dff00'
card_mod:
style: |
ha-card {
background-color: transparent !important;
box-shadow: none;
justify-self: left;
margin-left: 50px;
}
:host {
display: grid;
}
- type: entities
entities:
- entity: sensor.date_time