Cant change the size of the card

[bananflugan]

Hi,

I am having issues changing the size of this great custom card.

No matter what i put under the style section nothing is happening to the card, it stays very big. The config i currently have in my ui config is the following:

type: custom:circle-sensor-card
        name: Humidity 1st Floor
        entity: sensor.humidity_3
        min: 0
        max: 100
        gradient: true
        stroke_width: 7
        font_style:
          color: black
          font-size: 1.5em
        style:
          width: 45px
          hight: 45px

Best regards bananflugan

[marktillo]

You’ve spelt height wrong also you may have to use style: Ha-card{ width: 50px !important; Height:50px !important; }

[a-bianucci]

I have the same issue

type: 'custom:circle-sensor-card'
entity: sensor.temperature_measurement
name: Living Room Temp
stroke_width: 10
gradient: true
units: F
fill: 'rgba(99,94,93,.95)'
font_style:
  color: white
  font-size: 2em
  font-family: Avantgarde
color_stops:
  '65': '#639BD5'
  '70': '#33931B'
  '75': '#BD371C'
style:
  width: 25px
  height: 25px

[bananflugan]

@marktillo thank you for spotting my spelling error! 👍

After messing about with this for quite a while i have managed to solve it, with another custom mod.

I first tried with this, which did not work:

      - type: custom:circle-sensor-card
        name: Humidity 1st Floor
        entity: sensor.humidity_3
        min: 0
        max: 100
        gradient: true
        stroke_width: 10
        font_style:
          color: black
          font-size: 1.0em
        style: |
          ha-card {
            width: 70px !important;
            height: 50px !important;
          }

What i had to do was to use a mod called card-mod, you can find it here: https://github.com/thomasloven/lovelace-card-mod

My current code that is working:

      - type: custom:mod-card
        style: |
          ha-card {
            width: 350px !important;
            height: 200px !important;
          }
        card:
          type: horizontal-stack
          cards:
          - type: custom:circle-sensor-card
            name: Humidity 1st Floor
            entity: sensor.humidity_3
            min: 0
            max: 100
            gradient: true
            stroke_width: 10
            font_style:
              color: black
              font-size: 1.0em
          - type: custom:circle-sensor-card
            name: Humidity 2st Floor
            entity: sensor.humidity_6
            min: 0
            max: 100
            gradient: true
            stroke_width: 10
            font_style:
              color: black
              font-size: 1.0em

Hope this helps!

[a-bianucci]

That did... Thank you.