diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 2140038978..7c2759102d 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -243,11 +243,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     );
 
     let itemsToShow = this._config?.forecast_slots ?? 5;
-    if (this._sizeController.value.width === "very-very-narrow") {
+    if (this._sizeController.value?.width === "very-very-narrow") {
       itemsToShow = Math.min(3, itemsToShow);
-    } else if (this._sizeController.value.width === "very-narrow") {
+    } else if (this._sizeController.value?.width === "very-narrow") {
       itemsToShow = Math.min(5, itemsToShow);
-    } else if (this._sizeController.value.width === "narrow") {
+    } else if (this._sizeController.value?.width === "narrow") {
       itemsToShow = Math.min(7, itemsToShow);
     }
 
@@ -266,8 +266,12 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card
         class=${classMap({
-          [this._sizeController.value.height]: true,
-          [this._sizeController.value.width]: true,
+          [this._sizeController.value?.height]: Boolean(
+            this._sizeController.value
+          ),
+          [this._sizeController.value?.width]: Boolean(
+            this._sizeController.value
+          ),
         })}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({