Thermostat card, how to make it bigger, as a single card within a view

Hi,

I use the thermostat card, and want to use this as a single card within a view.
But I can’t figure out how to “blow up” the size of the card to fill the screen.
I’ve tried panel: true but it only affect the row…

Is there a way to make this card bigger?

You can adjust card sizes (in a panel view) with the custom layout card:

Probably something like this:

 max_columns: 1
 max_width: 100%

I tried this, the only difference is that I see the card is now expanded horizontally.

Used this code:

  - id: 8
    name: TEST 5
    panel: true
    badges:
    icon: mdi:numeric-5-circle
    cards:
      - type: custom:layout-card
        max_columns: 1
        max_width: 100%
        cards:
          - type: thermostat
            entity: climate.stue

1 Like

I have this problem, too! Anyone fgured out how to invrease the size of the thermostat?

My goal is to maki a single card on a wall mounted tablet - so BIG is needed :slight_smile:

This was the closest I got when I worked on this. Quite possible it can be better also.
You are thinking something like this ?

Unfortunately no, I’m looking for the classic thermostat with the circle control for temperature.

Thanx anyway!

I managed to use layout-card and card-mod to get a thermostat occuppied the entire screen with the following config. However, the shadow visual effects for selected mode is off after scaling. I am still struggling finding a solution for this.

Edit: updated the style to hide the visual effects of the icon button. You still can see it when it is pressed, but at least it will disappear after you let go the button.

  - theme: Backend-selected
    subview: true
    title: 書房冷氣
    path: climate
    icon: ''
    type: custom:grid-layout
    layout:
      grid-template-columns: 100%
      grid-template-rows: 540px
    badges: []
    cards:
      - type: thermostat
        entity: climate.hvac_study
        name: ' '
        card_mod:
          style:
            .: |
              .content {
                transform: scale(1.8);
              }
            ha-icon-button:
              $:
                mwc-icon-button:
                  $:
                    button: |
                      mwc-ripple {
                        display: none;
                      }

1 Like