Markdown card width

Configuration Frontend
1

I can’t seem to adjust the width of my markdown card. I want it to be 30% of the width, I have 2 columns so one would be 30% (the markdown on the left) and the other 70%.

image

Code:

          - type: conditional
            conditions:
              - condition: state
                entity: input_boolean.ibbq_all_probes
                state: "on"
              - condition: state
                entity: sensor.ibbq_battery
                state_not: "unavailable"
            card:
              type: custom:stack-in-card
              mode: horizontal
              cards:
                - type: markdown
                  content: '<table><tr><th>&nbsp; All Probes</th></tr><tr><td><pre> {{ states(''sensor.ibbq_probe_all_temps'')|replace(",","\n")}}</pre></td></tr></table>'
                  style: |
                    ha-card {
                      --iron-icon-width: 45px;
                      --iron-icon-height: 45px;
                    }
                - type: vertical-stack
                  cards:
                    - type: custom:mod-card
                      style: |
                        no-header {
                          padding: 2px 10px 2px 2px;
                        }
                      card:
                        type: custom:slider-entity-row
                        size: 70%
                        hide_state: false
                        full_row: true
                        name: minutes
                        entity: input_number.ibbq_target_probe_all
                    - type: horizontal-stack
                      cards:
                        - type: "custom:button-card"
                          entity: input_select.probe_4_meat_types
                          show_name: false
                          etc...
2

The “size” option does not exist.

Go to huge card-mod thread → 1st post → link at the bottom → styling horizontal-stack or stack-in-card.

3

huge card-mod thread? Do you have the link?

4
1 Like
5

This was the code if anyone needs something similar:


              type: custom:mod-card
              card_mod:
                style:
                  hui-horizontal-stack-card $: |
                    div#root > :first-child {
                      width: 30%;
                      flex: auto; 
                    }
                    div#root > :last-child {
                      width: 70%;
                      flex: auto; 
                    }
1 Like