Button-card alignment help

Share your Projects! Dashboards & Frontend
1

I am having trouble aligning my custom:button-card. Basically my title is button-card and i have few buttons underneath. The title button cuts-off and I don’t want to use the width option. How do I align buttons to look nice and clean?

My code:

Kids Bedroom

  • type: vertical-stack
    cards:
    • type: horizontal-stack
      cards:
      • type: custom:button-card
        color_type: label-card
        color: var(–paper-item-icon-color)
        name: Kids Bedroom
        size: 100%
        styles:
        card:
        - border-radius: 0px
        - height: 10px
    • type: horizontal-stack
      cards:
      • type: custom:button-card
        entity: switch.air_purifier_kb
        color: auto
        icon: mdi:light-switch
        name: Airpurifier
        size: 100%
        styles:
        card:
        - width: 125px
        - height: 125px
      • type: custom:button-card
        entity: switch.kidsroom_light
        color: auto
        icon: mdi:lightbulb-outline
        name: Light
        size: 100%
        styles:
        card:
        - width: 125px
        - height: 125px
      • type: custom:button-card
        entity: switch.kidsroom_fan
        color: auto
        icon: mdi:fan
        name: Fan
        size: 100%
        styles:
        card:
        - width: 125px
        - height: 125px

image

1 Like
2

I have a somewhat similar question. Is it possible to make cards auto-size? So that they would line up evenly, regardless of screen resolution or device viewing it from?