Tile card & card_mod margins

Configuration Frontend
1

Hi there,

I’m trying to use the tile card without the icon and with enough space for presenting data (like the button-card).
I’m able to do that with the following code but can’t use the space to the right side, even with margin-right (missing “ay” and “h” in kWh).

Screenshot 2024-09-12 at 21.23.21

Can anyone help me?

    card_mod:
      style:
        ha-tile-icon$: |
          .shape { 
              display: none !important;      
          } 
        ha-tile-info$: |
          .primary {
            margin-top: -5px;
            margin-left: -10px;  <- WORKING AS EXPECTED
            margin-right: 5px;   <- NOT WORKING AS EXPECTED
            font-size: 12px !important; 
            font-weight: normal !important; 
          } 
          .secondary {
            visibility: hidden;
            margin-top: 1px;             
            margin-left: -10px;  
          } 
          .secondary:before {
            visibility: visible;
            content: "{{states('sensor.daily_solar_energy')|float(0)|round(2)}} kWh";          
            font-size: 18px !important; 
            font-weight: bold !important; 
          }

Thanks.

2

have you tried as a single line :

margin: -0px -30px -0px -30px;

I often get more luck with that…

3

Thanks but it’s the same.

4

Fixed:

            padding-right: 10px;
            text-overflow: clip;