Help with reducing spaces between entities in vertical stack

Configuration Frontend
1

Hello All,

Can someone please help me with CSS styling for the below need?

Im trying to create a sidebar for my Dashboard and added title cards as a navigation menu like below. (Home, Lights, Energy, Security)

Screenshot 2023-10-15 at 3.43.57 PM
Screenshot 2023-10-15 at 3.43.57 PM2100×1160 134 KB

And below is the code

type: custom:mushroom-title-card
title: Home
alignment: center
style: |
  ha-card {
    font-size: 9px
    padding: 0px
    padding-top: 0px
    padding-bottom: 0px
  }

As you see there is a massive gap between these title cards and they don’t look like a navigation path.

Can someone please help reduce the space between them.

2

This will reduce the gap somewhat with card mod.

type: custom:mushroom-title-card
title: Home
alignment: center
card_mod:
  style: |
    ha-card {
      padding: 0px !important;
      height: 35px !important;
    }

For other styling options check out my guide linked in my profile and look at the title card section :slight_smile:

1 Like
3

Your guide is super helpful. Thank you for putting time into making it

1 Like