Glance card spacing

Configuration Frontend
1

Hi, quick question (I searched but cant find anything). How would I reduce the spacing in this glance card?:

image
image1428Ă—687 73.9 KB

Its for a tablet display and the glance cards use too much space. Thanks!

2

I haven’t specifically tried it with a glance card, but modifying the height property using card_mod has worked for me with several cards (but not all cards). You will have to experiment with the number to get it just right. For example:

card_mod:
  style: |
    ha-card {
      height: 100px;
    }
3

Hi @PlayedIn , thanks for your reply, I tried it with height and it didnt seem to make any difference (I put in 1000 in the example just to show it does’t change):

Maybe its not possible with a glance card?

image
image992Ă—602 25.1 KB

4

Yes, I just created a glance card, and it didn’t work for me either. It has worked for several cards to remove dead space but not this one. I wonder if you chose to not have a title on the glance card but instead combined it with another card for the title (one that could be manipulated by the height property) in a vertical stack, would that make it more compact. I have had luck with removing the gap between cards in a vertical stack by using negative margins.

5

Hi @PlayedIn , thanks, I’ll give it a shot.

6

Hello
I just started playing with card_mod for glance card.
I was able to :

  • resize the card height
  • resize the font size

But i’d like to center the text and strangely the area where the text is do not follow the card size

let me explain with image :

font size 30px
image

font size 80px
image

I’d like the text to be big and to occupies the whole space, does anyone know how ?

He’s the yaml

show_name: false
show_icon: false
show_state: true
type: glance
entities:
  - entity: sensor.poele_on_last_fill_2
    card_mod:
      style: |
        :host {
           font-size: 80px;
           height: 69px;
        }

thx a lot

EDIT : glance is not an obligation, i just want the visual, but glance is the one I reached the closest to my needs.

7

As a starting point - have a look at the main card-mod thread → 1st post → link at the bottom title “fantastic” → glance card

In future - suggest to ask all card-mod related questions in that thread.

8

Hello
thx for your reply
you mean this thread ?
https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card

Yep I will post there but this thread looked more specific to my needs.

Thx though :slight_smile: