Co-ordinating card dimensions

[Peter_G]

My project: to use a tablet to display a lovelace view showing a digital clock and two entity cards showing two different temperatures. I have coded the items but have not been able to get the two entity cards to match the total width or colors of the clock.

Here is the code I have used, very grateful for help!

views:
  - title: Vertical
    path: vertical
    icon: mdi:blinds-vertical
    type: custom:vertical-layout
    badges: []
    cards:
      - type: custom:digital-clock
        card_mod:
          style: |
            ha-card {
              color: yellow      ;
              background-color: #0000FF;
              font-size: 60px;
              width: 1000px !important;
              height: 280px !important;
              }
            locale: se
            dateFormat:
              weekday: long
              day: 2-digit
              month: long
            timeFormat:
              hour: 2-digit
              minute: 2-digit
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.vardagsrummet_temperature
            name: Inne temp.
            card_mod:
              style: |
                :host {
                   --mush-card-primary-font-size: 24px;
                   --mush-card-secondary-font-size: 85px;
                   --mush-card-primary-font-weight: bold;
                   --mush-card-secondary-font-weight: bolder;
                 }
          - type: custom:mushroom-entity-card
            entity: sensor.extra_temperature
            name: Ute temp.
            card_mod:
              style: |
                :host {
                   --mush-card-primary-font-size: 24px;
                   --mush-card-secondary-font-size: 85px;
                   --mush-card-primary-font-weight: bold;
                   --mush-card-secondary-font-weight: bolder;
                 }

[jeotek (JeJo)]

Hi Peter, I’m new to this.

But have you tried to put the mushroom-entity-card’s in a grid and then use the “fill_container” on the mushroom-entity-card’s

Found a post that maybe can help you:

Mushroom Cards Card Mod Styling/Config Guide

Hi Dimitri, Your guide helps me a lot in preparing the dashboard. But I’m stuck in one place, can you please help? I have two grids and I’m trying to remove the gap between them. Im using padding for each card, but the size wont reduce for the entire grid. First grid code: square: true type: grid cards: - features: - type: vacuum-commands commands: - start_pause - stop - return_home type: tile entity: vacuum.roborock_s7_maxv vertical:…

[Peter_G]

Thanks very much for your input. Including the “fill container=true” solved the problem. I have managed to change the background color of the entity cards but not the font color. Still working on that but I am not convinced that its is at all possible with the mushroom entity card. Would be grate if anyone could comment on this. I enclose a screen dump of the new lovelace view and also the revised code.

kiosk_mode:
  admin_settings:
    hide_header: false
    hide_sidebar: false
  non_admin_settings:
    hide_header: true
    hide_sidebar: true
views:
  - title: Digitalklocka
    path: digitalklocka
    type: custom:grid-layout
    columns: 2
    layout:
      grid-template-columns: 50% 50%
      grid-template-rows: auto
      grid-template-areas: |
        "header header"
        "klocka klocka"
        "temp1 temp2"
    icon: mdi:tablet
    badges: []
    cards:
      - type: custom:gap-card
        height: 50px;
        view_layout:
          grid-area: header
      - type: custom:digital-clock
        card_mod:
          style: |
            ha-card {
              color: yellow      ;
              background-color: #0000FF;
              font-size: 60px;
              }
            locale: se
            dateFormat:
              weekday: long
              day: 2-digit
              month: long
            timeFormat:
              hour: 2-digit
              minute: 2-digit
        view_layout:
          grid-area: klocka
      - type: custom:mushroom-entity-card
        entity: sensor.vardagsrummet_temperature
        name: Inne temp.
        fill_container: true
        card_mod:
          style: |
            :host {
            --mush-card-primary-font-size: 24px;
            --mush-card-secondary-font-size: 85px;
            --mush-card-primary-font-weight: bold;
            --mush-card-secondary-font-weight: bolder;
            }
            ha-card {
              color: yellow;
              background-color: #E0FFFF;
            }
        view_layout:
          grid-area: temp1
      - type: custom:mushroom-entity-card
        entity: sensor.extra_temperature
        name: Ute temp.
        fill_container: true
        card_mod:
          style: |
            :host {
            --mush-card-primary-font-size: 24px;
            --mush-card-secondary-font-size: 85px;
            --mush-card-primary-font-weight: bold;
            --mush-card-secondary-font-weight: bolder;
            }
            ha-card {
              color: yellow;
              background-color: #E0FFFF;
            }
        view_layout:
          grid-area: temp2

[sebbaT]

Add primary and secondary text colors to your ha-card like so:

card_mod:
  style: |
    :host {
    --mush-card-primary-font-size: 24px;
    --mush-card-secondary-font-size: 85px;
    --mush-card-primary-font-weight: bold;
    --mush-card-secondary-font-weight: bolder;
    }
    ha-card {
      background-color: #E0FFFF;
      --primary-text-color: yellow;
      --secondary-text-color: yellow;
    }

[Peter_G]

Wonderful - Thank you