diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 27c1f1bb28..08cd54111f 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -56,6 +56,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
 
   public hass?: HomeAssistant;
   private _config?: Config;
+  private _updated?: boolean;
 
   static get properties(): PropertyDeclarations {
     return {
@@ -78,6 +79,11 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     this._config = { min: 0, max: 100, theme: "default", ...config };
   }
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._setBaseUnit();
+  }
+
   protected render(): TemplateResult {
     if (!this._config || !this.hass) {
       return html``;
@@ -148,12 +154,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
-    (this.shadowRoot!.querySelector(
-      "ha-card"
-    )! as HTMLElement).style.setProperty(
-      "--base-unit",
-      this._computeBaseUnit()
-    );
+    this._updated = true;
+    this._setBaseUnit();
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -169,6 +171,19 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     }
   }
 
+  private _setBaseUnit(): void {
+    if (!this.isConnected || !this._updated) {
+      return;
+    }
+    const baseUnit = this._computeBaseUnit();
+    if (baseUnit === "0px") {
+      return;
+    }
+    (this.shadowRoot!.querySelector(
+      "ha-card"
+    )! as HTMLElement).style.setProperty("--base-unit", baseUnit);
+  }
+
   private _computeSeverity(numberValue: number): string {
     const sections = this._config!.severity;