Vertical Stack / Horizontal Stack

Configuration Frontend
1

I have been trying to figure this out for weeks and have even rebuilt the entire code from scratch.
Every time I put in an iframe or picture element is gives me three columns instead of the four.

Notworking
Notworking1570×710 200 KB

If I remove the picture element - then it looks perfect

Working
Working1597×710 190 KB

Any ideas on how I am screwing this up?

title: My Awesome Home
# Include external resources
panel: false
resources:
  - url: /local/my-custom-card.js
    type: js
  - url: /local/my-webfont.css
    type: css
  - url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
    type: module
  - url: /local/compact-custom-header.js?v=0.0.1
    type: module
  - url: /local/button-card.js?v=0.0.4
    type: module
  - url: /local/layout-card.js
    type: module
  - url: /local/dual-gauge-card.js
    type: js
cch:
  hide_tabs: '2,3,4,5,6,7,8'
  compact_header: true
views:
    # View tab title.
  - title: Main
    # Unique path for direct access /lovelace/${path}
    path: Main
    # Each view can have a different theme applied. Theme should be defined in the frontend.
    theme: dark-LightRed
    # The cards to show on this view.
    cards:
    #First
     - type: vertical-stack
       cards:
       - type: horizontal-stack
         cards:
         - type: "custom:button-card"
           color_type: label-card
           entity: climate.hallway
           label: >
                   [[[
                     var bri = states['climate.hallway'].attributes.temperature;
                     return '' + (bri ? bri : '0') + '°F'; 
                     ]]]
           show_label: true
           show_name: false
           show_icon: false
           size: 100%
           styles:
             card:
               - height: 100px
               - width: 115px
             label:
               - font-weight: bold
               - font-size: 50px
           state:
              - value: 'cool'
                styles:
                  label:
                    - color: rgb(28, 128, 199)
                  card:
                    - background-color: rgb(59, 69, 73)
              - value: 'heat'
                styles:
                  label:
                    - color: red
                  card:
                    - background-color: white
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 325px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
          - type: horizontal-stack
            cards:
             - type: "custom:button-card"
               color_type: label-card
               entity: climate.06070478a4cf12af4953
               label: >
                   [[[
                     var bri = states['climate.06070478a4cf12af4953'].attributes.current_temperature;
                     return '' + (bri ? bri : '0') + '°F'; 
                     ]]]
               show_label: true
               show_name: false
               show_icon: false
               size: 100%
               styles:
                 card:
                   - height: 100px
                   - width: 115px
                 label:
                   - font-weight: bold
                   - font-size: 50px
               state:
                  - value: 'unknown'
                    styles:
                      label:
                        - color: red
                      card:
                       - background-color: rgb(59, 69, 73)
                  - value: 'off'
                    styles:
                      label:
                        - color: red
                      card:
                        - background-color: white
                        - animation: blink 2s ease infinite
             - type: "custom:button-card"
               entity: sensor.climate.06070478a4cf12af4953
               icon: mdi:campfire
               color: rgb(28, 128, 199)
               styles:
                 card:
                      - height: 100px
                      - width: 325px
                 size: 20%
                 show_name: false
                 state:
                   - value: "off"
                     color: rgb(255, 0, 0)
                   - value: "unknown"
                     color: rgb(255, 94, 1)
                     icon: mdi:campfire
       - type: vertical-stack
         cards:
            - type: history-graph
              hours_to_show: 96
              refresh_interval: 3600
              entities:
               - entity: sensor.sidney_room_temperature
                 name: Westley's Tempature
               - sensor.sidney_room_humidity
       - type: vertical-stack
         cards:
          - type: "custom:button-card"
            entity: alarm_control_panel.abode_alarm
            icon: mdi:space-invaders
            color: rgb(0, 255, 0)
            styles:
              card:
                - height: 170px
                - width:115px
                - font-size: 12px
            show_name: true
            state:
             - value: "disarmed"
               color: rgb(0, 255, 0)
               icon: mdi:lock-open-variant-outline
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
#START OF THE SECOND COLUMN
     - type: vertical-stack
       cards:
       - type: horizontal-stack
         cards:
         - type: "custom:button-card"
           entity: alarm_control_panel.abode_alarm
           show_label: true
           label: >
                 [[[ return '' + states['alarm_control_panel.abode_alarm'].state; ]]]
           state:
             - value: "armed_home"
               color: red
               icon:  mdi:bell
               styles:
                 card:
                   - height: 100px
                   - width: 370px
                 size: 20%
             - value: "disarmed"
               color: rgb(255, 94, 1)
               icon: mdi:fire
               label: >
                 [[[ return '' + states['alarm_control_panel.abode_alarm'].state; ]]]
               styles:
                 card:
                   - height: 100px
                   - width: 370px
                 size: 20%
             - value: "armed away"
               color: rgb(255, 94, 1)
               icon: mdi:fire
               label: >
                 [[[ return '' + states['alarm_control_panel.abode_alarm'].state; ]]]
               styles:
                 card:
                   - height: 100px
                   - width: 370px
                 size: 20%
       - type: vertical-stack
         cards:      
         - type: horizontal-stack
           cards:
           - type: "custom:button-card"
             entity: sensor.speedtest_download
             color: rgb(28, 128, 199)
             label: >
                  [[[ return 'Down: ' + states['sensor.speedtest_download'].state; + 'Mbps' ]]]
             show_label: true
             show_name: false
             styles:
               card:
                    - height: 100px
                    - width: 180px
               size: 20%
           - type: "custom:button-card"
             entity: sensor.speedtest_upload
             color: rgb(28, 128, 199)
             label: >
                  [[[ return 'Up: ' + states['sensor.speedtest_upload'].state; + 'Mbps' ]]]
             show_label: true
             show_name: false
             styles:
               card:
                    - height: 100px
                    - width: 180px
               size: 20%
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: binary_sensor.front_door
           state:
             - value: "on"
               color: red
               icon: mdi:door-open
               styles:
                 card:
                   - height: 100px
                   - width: 370px
                 size: 20%
             - value: "off"
               color: rgb(28, 128, 199)
               icon: mdi:door
               styles:
                 card:
                   - height: 100px
                   - width: 370px
                 size: 20%
       - type: vertical-stack
         cards:
         - type: picture
           image: https://media.foxtv.com/weather/wtvt/wxpages/7day.jpg
#START OF THE THIRD COLUMN
     - type: vertical-stack
       cards:
       - type: horizontal-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           label: "3"
           show_label: true
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
#START OF THE FOURTH COLUMN
     - type: vertical-stack
       cards:
       - type: horizontal-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           label: "4"
           show_label: true
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           entity: sensor.hallway_thermostat_temperature
           icon: mdi:air-conditioner
           color: rgb(28, 128, 199)
           styles:
             card:
                  - height: 100px
                  - width: 370px
             size: 20%
             show_name: false
             state:
               - value: "off"
                 color: rgb(255, 0, 0)
               - value: "heat"
                 color: rgb(255, 94, 1)
                 icon: mdi:fire
2

It looks like the picture is too large for the column.
Have you tried to scale it down?

3

No - how would I do that?

4

untested but you can give it a try.
Under style: add

transform: 'scale(0.7,0.7)'

but maybe that won’t work on the actual image. I know you can scale icons and labels with this.

5

I added it to that section and even changed the numbers then refreshed with a new incognito window. It didn’t look to make and change to the image size.

       - type: vertical-stack
         cards:
         - type: picture
           image: https://media.foxtv.com/weather/wtvt/wxpages/7day.jpg
           transform: 'scale(0.1,0.1)'
6

I found a workaround for now by adding a blank card for the length of the screen which seems to have forced it to work.

       - type: vertical-stack
         cards:
         - type: picture
           image: https://media.foxtv.com/weather/wtvt/wxpages/7day.jpg
#####BLACK SPACE
       - type: vertical-stack
         cards:
         - type: "custom:button-card"
           color_type: blank-card
           color: black
           styles:
             card:
                  - height: 300px
                  - width: 370px
                  - background-color: black
             size: 20%
             show_name: false
             show_icon: false
7

Hello! Please tell me how to change the size of a separate card? I get big ones on the right side.

2023-01-20_16-20-52
2023-01-20_16-20-521640×965 243 KB