Help me solve my alignment

I have a question about the alignment. I’ve tried everything, but I can’t get this card right. I’m also sharing my code. As you can see, it should be the same as the other cards (right side)

      - type: horizontal-stack
        cards:
          - type: custom:state-switch
            entity: template
            template: >-
              {% if is_state_attr('media_player.sonos_woonkamer', 'source', 'Spotify
              Connect') and is_state('media_player.sonos_woonkamer', 'playing') %}
                spotify
              {% elif is_state_attr('media_player.sonos_woonkamer', 'source', 'TV') and
              is_state('media_player.sonos_woonkamer', 'playing') %}
                tv
              {% else %}
                hide
              {% endif %}
            states:
              spotify:
                type: custom:mushroom-template-card
                primary: '{{ state_attr(''media_player.sonos_woonkamer'', ''media_artist'') }}'
                secondary: '{{ state_attr(''media_player.sonos_woonkamer'', ''media_title'') }}'
                icon: mdi:spotify
                layout: vertical
                icon_color: grey
                picture: ''
                entity: media_player.sonos_woonkamer
                card_mod:
                  style: |
                    ha-card {
                      {% if not is_state(config.entity, 'idle') %}
                        background-image: url('{{ state_attr(config.entity, "entity_picture") }}');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-color: rgba(var(--rgb-card-background-color), 0.7);
                        background-blend-mode: overlay;
                      {% endif %}
                      --rgb-state-media-player: var(--rgb-teal);
                      box-shadow: var(--card-box-shadow);
                      margin: 0px 0px 0px 14px;
                    }
              tv:
                type: custom:mushroom-template-card
                primary: '{{ state_attr(''media_player.lg_webos_tv_up77006lb'', ''source'') }}'
                secondary: Soundbar
                icon: ''
                icon_color: grey
                picture: >-
                  /api/media_player_proxy/media_player.lg_webos_tv_up77006lb?token=14bd9a7da2a506cb14b503fa5ad19988481a2c72777b0c39a3a23786538a75c5&cache=e33f2d5224fb5709
                entity: media_player.sonos_woonkamer
                fill_container: false
                multiline_secondary: false
                layout: vertical
                card_mod:
                  style: |
                    ha-card {
                      {% if not is_state(config.entity, 'idle') %}
                        background-image: url('{{ state_attr(config.entity, "entity_picture") }}');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-color: rgba(var(--rgb-card-background-color), 0.7);
                        background-blend-mode: overlay;
                      {% endif %}
                      --rgb-state-media-player: var(--rgb-teal);
                      box-shadow: var(--card-box-shadow);
                      margin: 0px 0px 0px 14px;
                    }
          - type: conditional
            conditions:
              - condition: state
                entity: media_player.ps5_console
                state_not: 'off'
            card:
              type: custom:mushroom-template-card
              primary: '{{ state_attr(''media_player.ps5_console'', ''media_title'') }}'
              secondary: >-
                {% if is_state('media_player.ps5_console', '') %}
                {{ states('media_player.ps5_console') }}
                {% else %}
                Speeltijd: {{ timedelta(states('sensor.playstation_aan_vandaag') |
                float(0) / 24) }}
                {% endif %}
              icon: mdi:sony-playstation
              icon_color: grey
              picture: ''
              entity: media_player.ps5_console
              layout: vertical
              card_mod:
                style: |
                  ha-card {
                    {% if not is_state(config.entity, 'idle') %}
                      background-image: url('{{ state_attr(config.entity, "entity_picture") }}');
                      background-position: center;
                      background-repeat: no-repeat;
                      background-size: cover;
                      background-color: rgba(var(--rgb-card-background-color), 0.7);
                      background-blend-mode: overlay;
                    {% endif %}
                    --rgb-state-media-player: var(--rgb-teal);
                    box-shadow: var(--card-box-shadow);
                    margin: 0px 0px 0px 14px;
                  }

2 posts - 2 participants

Read full topic