diff --git a/src/panels/config/backup/components/ha-backup-summary-card.ts b/src/panels/config/backup/components/ha-backup-summary-card.ts
index 0efef8c3b5..1054f0b061 100644
--- a/src/panels/config/backup/components/ha-backup-summary-card.ts
+++ b/src/panels/config/backup/components/ha-backup-summary-card.ts
@@ -68,7 +68,8 @@ class HaBackupSummaryCard extends LitElement {
     .summary {
       display: flex;
       flex-direction: row;
-      gap: 16px;
+      column-gap: 16px;
+      row-gap: 8px;
       align-items: center;
       padding: 20px;
       width: 100%;
@@ -139,6 +140,18 @@ class HaBackupSummaryCard extends LitElement {
       overflow: hidden;
       white-space: nowrap;
     }
+
+    @media all and (max-width: 550px) {
+      .summary {
+        flex-wrap: wrap;
+        padding: 8px;
+      }
+      .action {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
   `;
 }