Weather widget ignores middle class in mobile mode

[derkork]

I have set up a weather widget stack liket this:

type: vertical-stack
cards:
  - type: markdown
    content: '# Planetares Wetter'
    card_mod:
      class: header
  - type: weather-forecast
    show_forecast: false
    show_current: true
    name: AKTUELL
    forecast_type: daily
    entity: weather.home
    card_mod:
      class: middle
  - type: weather-forecast
    show_forecast: true
    show_current: false
    name: AKTUELL
    forecast_type: daily
    entity: weather.home
    card_mod:
      class: middle
  - type: entity
    card_mod:
      class: middle
    entity: sensor.sun_next_dawn
  - type: entity
    entity: sensor.sun_next_dusk
    card_mod:
      class: middle
  - type: markdown
    content: '###   '
    card_mod:
      class: footer

On the desktop this renders nicely to:

However in mobile mode the middle class seems to be ignored for the weather widget and I get this:

[th3jesta]

This is an issue where Home Assistant overwrites the classes when the viewport is narrow. I have reported the issue to the card-mod developers, as it's not caused by HA-LCARS.
thomasloven/lovelace-card-mod#386

Workarounds are:

• Use a different weather card, such as https://github.com/bramkragten/weather-card
• Manually apply the style to the card, such as:

type: weather-forecast
entity: weather.home
forecast_type: daily
card_mod:
  style: |
    ha-card {
      background: black !important;
      text-transform: uppercase;
      border-radius: 0px !important;
      border-left: 35.5px solid var(--lcars-card-mid-left-color);
      padding-left: 6px !important;
    }

[derkork]

Thank you very much for investigating this and providing a workaround!