Font-size of a mushroom-entitiy card in a stack gets cut-off

Configuration Frontend
1

Hey everyone!
I’m in the final parts of my dashboard.
But I want to enlarge some values (some other later, once this works) so that I can see them from my couch.

The problem is, I have been able to increase the font-size within the card, but it gets cut-off.
I’d like the card to be 2 rows high and have a text as big as it fits a 5 digit-number.
But unfortunately it looks like so:

image
image2596×1524 356 KB

Here is the code for the stack:

type: vertical-stack
cards:
  - type: tile
    entity: sensor.udm_pro_g_net_port_9_rx
    name: Download
    color: green
    grid_options:
      columns: 6
      rows: 1
  - type: tile
    entity: sensor.udm_pro_g_net_port_9_tx
    name: Upload
    color: red
    grid_options:
      columns: 6
      rows: 1
  - type: custom:mushroom-entity-card
    entity: sensor.solax_pv_power_total
    icon: ""
    icon_color: amber
    fill_container: true
    primary_info: state
    secondary_info: none
    card_mod:
      style: |
        ha-card {
          #background: indianred;
          box-shadow: none ;
          --card-primary-font-size: 35px;
           #--card-secondary-color: black;
           align-items: center;
        }
        mushroom-state-info$: |
          .container {
            align-items: end;
        }
  - event_grouping: true
    drop_todayevents_from: "10:00:00"
    next_days: 3
    pattern:
      - icon: mdi:flower
        color: green
        type: organic
        label: Grünabfall
      - icon: mdi:newspaper
        color: blue
        type: paper
        pattern: Altpapier
      - icon: mdi:recycle-variant
        color: amber
        type: recycle
        pattern: Gelbe Tonne
      - icon: mdi:trash-can-outline
        color: grey
        type: waste
        label: Restmüll
        pattern: Restmüll
      - icon: mdi:dump-truck
        color: purple
        type: others
    day_style: weekday
    alignment_style: left
    items_per_row: 1
    refresh_rate: 60
    with_label: true
    layout: horizontal
    type: custom:trash-card
    entities:
      - calendar.abfallwirtschaftsbetrieb_landkreis_secret
    only_all_day_events: false
    full_size: false
    grid_options:
      columns: 6
      rows: 1
    use_summary: false
    card_mod:
      style: |
        ha-card {
          zoom: 1.5
        }
grid_options:
  columns: 6
  rows: auto

What could I possibly do?
I looked in the developer-options of the webpage, but this is way above my paygrade :wink:
I’d also use any other card that would fit the stack with a twin-row large text.

2

If you were using a sections dashboard you could make the tile double-high.

1 Like
3

You’ll need to add--card-primary-line-height: 35px !important;

card_mod:
      style: |
        ha-card {
          #background: indianred;
          box-shadow: none ;
          --card-primary-font-size: 35px;
          --card-primary-line-height: 35px !important;
           #--card-secondary-color: black;
           align-items: center;
        }
        mushroom-state-info$: |
          .container {
            align-items: end;
        }

I do not recommend using # to comment out lines

The align-items: are conflicting

card_mod:
  style: |
     ha-card {
       box-shadow: none ;
       --card-primary-font-size: 35px;
       --card-primary-line-height: 35px !important;
       align-items: center;
       }
1 Like
4

But is there any way I can code it to be double the height?

5

That was just a residue from trying around. I pasted tons of code from this forum.

6

Like this? The card should adjust on it’s own.

card_mod:
  style: |
     ha-card {
       --icon-symbol-size: 40px;
       --icon-size: 70px;
       box-shadow: none ;
       --card-primary-font-size: 70px;
       --card-primary-line-height: 70px !important;
       align-items: center;
       }
7

I have two other issues:

  1. Why is this space? (red color)

    image
    image2560×1600 391 KB

  2. Another problem I can not understand and solve:
    The upper part (purple) is 4 sections wide, it adjusts nicely on my laptop (browser) AND tablet (fully kiosk browser).

But the lower parts (orange) are 1 section plus 2 sections. When the right part becomes 3 sections wide, it will not fit onto the screen of the tablet (doesn’t matter if Surface Pro 9 with Windows or my 12,4" Tab 7 FE that displays the dashboard).
Even while the upper is 4 and the lower together also should be 4.

This is 1+3 on my laptop:

image
image1601×688 121 KB

This is on my tablet (with a 2560x1600 screen)
image
image2560×1600 233 KB

BTW: The value of 31W is just for testing and will be replaced :wink:

8

What type of dashboard are you using? Sections, Masonry, Horizontal?

Can you list the browser for each device?

Each device will process the CSS based on screen resolution as well as the browser’s interpretation.

9

It does if I change the line height - didn’t see that in the first place.

10

The line- height was separated into it’s own field in early 2024. Your inquiry isn’t the first and wont be the last :smiley:

1 Like
11

On my Laptop I’m using Opera - which is Chrome-based, same on my Surface Pro 9.
I’m using sections.

The aspect ratio on my Laptop is (depending how I size the browser) 4:3
The Surface has 3:2 - does not work
The Tablet has fully-kiosk browser, which is in 16:10, does also not work.

The weird thing is - it works with the device with the narrowest picture - 4:3, but not on the much wider 16:10 - despite it is affecting the width of the items.

12

I’m logging off, late in the US. I’ll re-engage tomorrow, but glad we made progress!

1 Like
13

I appreciate your help to the fullest!
Have a good night!

14

Hey - is the night in US over in the meantime? :smiley:
I could not solve the issue until now - do you have any idea to help me?