Custom:Clock-Weather-Card Spacing

Configuration Frontend
1

Does anyone know how I might go about aligning the clock-weather-card to the top of the available space? The wasted space up top is driving me crazy.

image
image1040×738 108 KB

1 Like
2

I realize I should clarify that I really love this card. I just wish I could find a way to have it take up less vertical space. If I could reclaim that space, I wouldn’t have vertical scroll bars on my tablets.

3

Not sure if you have already resolved this, however since I faced the same issue I decided to have a play and figured it out. Heres my code incase you or someone else needs it :slight_smile:

type: custom:clock-weather-card
entity: weather.home
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_rows: 3
forecast_days: 3
locale: en-AU
time_format: 12
hide_today_section: false
hide_forecast_section: false
hide_clock: false
hide_date: true
card_mod:
  style: |
    ha-card {
      border-radius: 24px;
      height: 240px !important;  /* Ensure the height is set */
      overflow: hidden;  /* Hide overflow if content exceeds height */
    }
    .card-content {
      height: 100%;  /* Ensure content fills the card height */
      transform: translateY(-30px);  /* Adjust content positioning */
    }
4

This still works. Thank you for posting.

5

I implimented the same thing too, what i have been trying to fix is the text being kind of centered but not really and it almost looks like it steps out. really want this all right justified and to change the order as well. I want the sunny and current temp to be larger with everything else being a little smaller

6

Test this out…

card_mod:
  style: |
    clock-weather-card-today-right-wrap-center {
     font-size:30px !important;
     margin: -10px !important;
      }
    clock-weather-card-today-right-wrap-bottom {
     margin-left: 20px;
      }
    clock-weather-card-today-right-wrap-top {
     font-size: 15px !important;
      }
    clock-weather-card-today-left img {
     height:70px !important;
     }

image
image781×433 33.2 KB

7

how do you change the font size of the clock? this is what i have

image

8

Test this out…

card_mod:
  style: |
    clock-weather-card-today-right-wrap-center {
     font-size:30px !important;
     margin: -10px !important;
      }
    clock-weather-card-today-right-wrap-bottom {
     margin-left: 20px;
      }
    clock-weather-card-today-right-wrap-top {
     font-size: 15px !important;
      }
    clock-weather-card-today-left img {
     height:70px !important;
     }

image