Help: How to reach same size with mini-graph-card and button-card

[fitim]

Hi guys,
I’m investing some time in my Lovelace at the moment and can’t reach my target. I want all button cards to have the same size, which is working perfectly when I don’t use the mini-graph-card inside of it.
Here is an example (lets call this “5-pack”):

I want it to look like this (lets call it “4-pack”):

On my mobile device (iOS APP on iPhone XS) also the “4 pack” is resizing the buttons with the mini-graph-card in the same way like the “5-pack”.

Here is my code of the 4-pack (which is the same like the 5-pack, just with one button less):

cards:
  - aspect_ratio: 1/1
    color: 'rgb(28, 128, 199)'
    entity: light.stehlampe_h
    icon: 'mdi:floor-lamp'
    name: Stehlampe
    state:
      - color: var(--disabled-text-color)
        value: 'off'
      - color: 'rgb(253, 216, 53)'
        value: 'on'
    type: 'custom:button-card'
  - aspect_ratio: 1/1
    color: 'rgb(28, 128, 199)'
    entity: cover.shelly_shsw_25_740a75
    name: |
      [[[
        var bri = states['cover.shelly_shsw_25_740a75'].attributes.current_position;
        return 'Rollo: ' + bri + '%';
      ]]]
    state:
      - color: var(--disabled-text-color)
        icon: 'mdi:window-shutter'
        value: closed
      - color: 'rgb(253, 216, 53)'
        icon: 'mdi:window-shutter-open'
        value: open
    type: 'custom:button-card'
  - color_thresholds:
      - color: '#e0614c'
        value: 21
      - color: '#fe9c67'
        value: 19
      - color: '#abe673'
        value: 17
      - color: '#00a1ff'
        value: 0
    entities:
      - sensor.temp
    font_size: 75
    points_per_hour: 2
    show:
      graph: bar
      icon: false
      name: null
      state: true
    type: 'custom:mini-graph-card'
  - color_thresholds:
      - color: '#e0614c'
        value: 60
      - color: '#fe9c67'
        value: 50
      - color: '#abe673'
        value: 40
      - color: '#00a1ff'
        value: 0
    entities:
      - sensor.humid_2
    font_size: 75
    points_per_hour: 2
    show:
      graph: bar
      icon: false
      name: null
      state: true
    type: 'custom:mini-graph-card'
type: horizontal-stack

[fitim]

Ok, I got it. For those with the same issue in the future:
Pick a smaller font size for the sensors in the mini-graph-card :D…

font_size: 55

Thank you anyways

[marrossko]

Hi guys,
I have been stacked with my mini-graph card. I’m trying to place a graph for the speedtest. I want to have the graph to have the same width as the large button (Desktop PC) . However, no matter I try the graph card does not display correctly…any suggestion?

here is my code:

- type: grid
  square: false
  columns: 4
  cards:
    - name: 'Speedtest'
      type: 'custom:mini-graph-card'
      icon: 'mdi:server'
      aspect_ratio: 2/1
      entities:
        - entity: sensor.speedtest_upload
          name: Upload
        - entity: sensor.speedtest_ping
          name: Ping
        - entity: sensor.speedtest_download
          name: Download
    - name: Desk Lamp
      type: 'custom:button-card'
      entity: switch.lamppcdesk
      icon: 'mdi:desk-lamp'
      template: black_template
      aspect_ratio: 1/1
      color_type: icon
      lock:
        enabled: false
      show_label: false
      show_last_changed: false
    - name: Desktop PC
      type: 'custom:button-card'
      entity: switch.deskpc
      icon: 'mdi:desktop_pc'
      template: black_template
      aspect_ratio: 1/1
      color_type: icon
      lock:
        enabled: true

[EmilioM (Emil)]

hi @marrossko can you share yaml code with “Desktop” card please.