Custom:mushroom-person-card - Change size

[McFarTech (Craig)]

Hi Team.

I am using the custom:mushroom-person-card and i am looking to reduce the size, if possible. There seems to be so much wasted space. is this possible?

[brewston (Tim Jones)]

You can make the background clear, so the space is still wasted but you can’t see it

I also hide the name and state. I recognise the photos and the state is reflected in the badge. If you create and assign icons to your zones, its pretty easy to tell where someone is from the badge.

type: horizontal-stack
cards:
  - type: custom:mushroom-person-card
    entity: person.tim
    use_entity_picture: true
    hide_name: true
    hide_state: true
    card_mod:
      style: |
        mushroom-shape-avatar {    
         {{ 'filter: grayscale(100%);' if is_state('person.tim', 'not_home') }}
           }
        ha-card {
         background: none;
         --ha-card-box-shadow: 0px;
            }
          
  - type: custom:mushroom-person-card
    entity: person.emma
    use_entity_picture: true
    hide_name: true
    hide_state: true
    card_mod:
      style: |
        mushroom-shape-avatar {    
         {{ 'filter: grayscale(100%);' if is_state('person.emma', 'not_home') }}
           }
        ha-card {
         background: none;
         --ha-card-box-shadow: 0px;
            }
            
  - type: custom:mushroom-person-card
    entity: person.isobel
    use_entity_picture: true
    hide_name: true
    hide_state: true
    card_mod:
      style: |
        mushroom-shape-avatar {    
         {{ 'filter: grayscale(100%);' if is_state('person.isobel', 'not_home') }}
           }
        ha-card {
         background: none;
         --ha-card-box-shadow: 0px;
            }
  - type: custom:mushroom-person-card
    entity: person.ellie
    use_entity_picture: true
    hide_name: true
    hide_state: true
    card_mod:
      style: |
        mushroom-shape-avatar {    
         {{ 'filter: grayscale(100%);' if is_state('person.ellie', 'not_home') }}
            }
        ha-card {
         background: none;
         --ha-card-box-shadow: 0px;
            }

[McFarTech (Craig)]

Thanks Tim for the reply. Will have a read and digest it all. appreciate the time to reply to me.

[Diligence (Peter)]

Hi brewston, I know this is an old topic. So is it possable to change the size of a card. I need to make a card larger?

[LiQuid_cOOled]

You can add height: 150px !important; or width: to adjust the card size. I assumed you meant the mushroom card not the stack card.

type: horizontal-stack
cards:
  - type: custom:mushroom-person-card
    entity: person.tim
    use_entity_picture: true
    hide_name: true
    hide_state: true
    card_mod:
      style: |
        mushroom-shape-avatar {    
         {{ 'filter: grayscale(100%);' if is_state('person.tim', 'not_home') }}
           }
        ha-card {
         background: none;
         height: 150px !important;
         --ha-card-box-shadow: 0px;
            }

[Marcoletto (Marco)]

Hello,
I’m trying to avoid that my picture is squeezed but unfortunately your solution doesn’ t work.

This is my code with the last part of the code that you suggest to insert (card_mod: …)

type: custom:mushroom-person-card
entity: device_tracker.iphone_marco
name: Marco
icon: ""
primary_info: name
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
icon_type: entity-picture
card_mod:
      style: |
        ha-card {
         background: none;
         height: 150px !important;
         --ha-card-box-shadow: 0px;
            }

The result does not change, the image is squized but I receive an errore (alert) also:

Visual editor not supported
At path: card_mod -- Expected a value of type `never`, but received: `[object Object]`
Puoi ancora modificare la tua configurazione in YAML.

as you can see in the picture below:

Can you help me, please?