Weather Card CSS Temperatures side by side

[edgy holly]

Is there a way to use the style: section to move the daily high/low temperatures to be side by side, rather than on top of each other?

I'm trying to compress the card shorter vertically for a kindle screensaver.

[tacit zinc]

you can inject css with the mod-card or card-mod integration from hacs

[ocean umbra]

I don't think card_mod will be useful in this instance. To be able to target each high & low temperature for each day and transpose their locations would probably be a nightmare to pull off. (I could be wrong though; I don't know a whole lot about CSS.)

Applying some card_mod to get the card itself might work for you. I was able to cut down on its size a little bit but not much. ```yaml
type: weather-forecast
entity: weather.demo_weather_south
show_current: true
show_forecast: true
forecast_type: daily
card_mod:
style: |
ha-card {
padding: 0px !important;
height: 200px !important;
width: 100%;
}

I think if you really want the temperatures to be side-by-side, you would probably have to fork the card and make your own modifications. This is way out of my expertise but looking at the code for the card, perhaps if you could combine lines 417-434 into a single DIV instead of two separate items... Again, I don't know how this really works but that's where I would look. Then, you would have to figure out how to get it incorporated into your HA... Here's a link to the code: LINK

<div class="temp">
  ${this._showValue(item.temperature)
    ? html`${formatNumber(
        item.temperature,
        this.hass!.locale
      )}°`
    : "—"}
</div>
<div class="templow">
  ${this._showValue(item.templow)
    ? html`${formatNumber(
        item.templow!,
        this.hass!.locale
      )}°`
    : hourly
      ? ""
      : "—"}
</div>

[dry oak]

or you could go for a dedicated weather sub page

this fits nicely on a 10" amazon tablet