Padding, Margin, and Other Formatting Confusion

Configuration Frontend
1

Struggling to understand how margins and padding are applied using card_mod. I’m trying to reduce the space between the icons and state value below. How is this achieved? The empty space is where the entity label would normally go, but I’ve got those blanked out as they are unnecessary.

image
image171×167 6.14 KB

Here is the code, nested within a decluttering template:

          card_mod:
            style: |
              #states > * {
                margin: -10px -20px -10px -10px !important;
                padding-right: 0px !important;
                padding-left: 0px !important;
              }
              ha-card {
                font-size: 11px !important;
                height: 20px;
                secondary-font-size: 5px !important;
                padding-right: 0px !important;
                padding-left: 0px !important;
                margin-right: 0px !important;
                margin-left: 0px !important;                
              }
              .card-header {
                font-size: 15px;
                margin: -20px 0px -10px !important;                  
                height: 40px
              }
2

What specific card? Unfortunately it is not consistent across all card types

image
image534×350 4.67 KB

3

It’s an Entities card within a decluttering card template.

4

Start here and post your additional questions in the main Card mod thread

5

Will do, thanks.

Dumb question…how do you navigate to the card-mod thread from the community home page? I’ve used the search, but it just brings up posts tagged with card-mod…how do you navigate to the main thread? I’m dumb…

6

One method is to use the search feature. Just enter card mod and select most viewed

image
image1530×724 78.4 KB

7

Simple rule: almost every popular custom card has a dedicated thread in “Share your project”. Card-mod as well.

1 Like