From e5c8f91e3f04145256230c226117a8f3707b3146 Mon Sep 17 00:00:00 2001
From: KS Jannette <kjannette@KSs-MacBook-Air.local>
Date: Thu, 5 Mar 2026 10:29:37 -0500
Subject: [PATCH] media queries

---
 frontend/src/components/Navbar.css         | 57 ++++++++++++++++++
 frontend/src/index.css                     | 70 ++++++++++++++++++++++
 frontend/src/pages/addresses/Addresses.css | 10 ++++
 frontend/src/pages/alerts/Alerts.css       | 51 ++++++++++++++++
 frontend/src/pages/login/Login.css         | 18 ++++++
 frontend/src/pages/subscribe/subscribe.css | 22 +++++++
 6 files changed, 228 insertions(+)

diff --git a/frontend/src/components/Navbar.css b/frontend/src/components/Navbar.css
index e9ac7ee..ce1abcd 100644
--- a/frontend/src/components/Navbar.css
+++ b/frontend/src/components/Navbar.css
@@ -64,3 +64,60 @@
   cursor: pointer;
   transition: all 0.15s ease;
 }
+
+/* ── Navbar Responsive ───────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .navbar {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+  }
+
+  .navbar__brand {
+    margin-right: 1rem;
+    font-size: 1.25rem;
+  }
+
+  .navbar__links {
+    flex-wrap: wrap;
+    gap: 0.2rem;
+  }
+
+  .navbar__link {
+    padding: 0.35rem 0.75rem;
+    font-size: 1.2rem;
+  }
+
+  .navbar__user {
+    font-size: 1.1rem;
+  }
+
+  .navbar__logout {
+    padding: 0.3rem 0.75rem;
+    font-size: 1.1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .navbar__links {
+    width: 100%;
+    gap: 0.15rem;
+  }
+
+  .navbar__link {
+    padding: 0.3rem 0.6rem;
+    font-size: 1.05rem;
+  }
+
+  .navbar__brand {
+    margin-right: 0;
+  }
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index faed8bb..aeea9b6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -355,4 +355,74 @@ button {
 .text-white-sm {
   color: white;
   font-size: 0.85rem;
+}
+
+/* ── Responsive Breakpoints ──────────────────────────────── */
+/* Mobile:  <= 480px                                          */
+/* Tablet:  481px – 768px                                     */
+/* Laptop:  769px – 1024px                                    */
+/* Desktop: >= 1025px (default styles above)                  */
+
+/* Laptop & below */
+@media (max-width: 1024px) {
+  .page--wide {
+    max-width: 100%;
+  }
+}
+
+/* Tablet & below */
+@media (max-width: 768px) {
+  html {
+    font-size: 13px;
+  }
+
+  .page {
+    padding: 1.25rem;
+  }
+
+  .btn--lg {
+    padding: 0.6rem 1.2rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  h3 {
+    font-size: 1.15rem;
+  }
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  html {
+    font-size: 12px;
+  }
+
+  .page {
+    padding: 1rem 0.75rem;
+  }
+
+  .form-control,
+  .form-select {
+    font-size: 0.95rem;
+  }
+
+  .btn {
+    padding: 0.45rem 0.85rem;
+    font-size: 0.95rem;
+  }
+
+  .btn--lg {
+    padding: 0.55rem 1rem;
+    font-size: 1rem;
+  }
+
+  .section {
+    padding: 0.75rem;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/addresses/Addresses.css b/frontend/src/pages/addresses/Addresses.css
index 6adf4f4..f52cf0c 100644
--- a/frontend/src/pages/addresses/Addresses.css
+++ b/frontend/src/pages/addresses/Addresses.css
@@ -28,3 +28,13 @@
   margin-left: 1rem;
   flex-shrink: 0;
 }
+
+/* ── Addresses Responsive ────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .address__remove {
+    margin-left: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+  }
+}
diff --git a/frontend/src/pages/alerts/Alerts.css b/frontend/src/pages/alerts/Alerts.css
index 8ef8bc3..72deb7f 100644
--- a/frontend/src/pages/alerts/Alerts.css
+++ b/frontend/src/pages/alerts/Alerts.css
@@ -61,3 +61,54 @@
   gap: 0.75rem;
   margin-top: 1rem;
 }
+
+/* ── Alerts Page Responsive ──────────────────────────────── */
+
+/* Laptop: tighten the gap */
+@media (max-width: 1024px) {
+  .alerts-grid {
+    gap: 1.5rem;
+  }
+}
+
+/* Tablet & below: collapse to single column */
+@media (max-width: 768px) {
+  .alerts-grid {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
+}
+
+/* Mobile: compact spacing */
+@media (max-width: 480px) {
+  .alerts-grid {
+    gap: 2rem;
+  }
+
+  .alerts__address-info {
+    padding: 0.75rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .alerts__rule {
+    padding: 0.75rem;
+  }
+
+  .alerts__rule .flex--between {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .alerts__save-test {
+    flex-direction: column;
+  }
+
+  .alerts__save-test .btn--lg {
+    width: 100%;
+    text-align: center;
+  }
+
+  .alerts__email-buttons {
+    flex-direction: column;
+  }
+}
diff --git a/frontend/src/pages/login/Login.css b/frontend/src/pages/login/Login.css
index cb1f8f1..e70c119 100644
--- a/frontend/src/pages/login/Login.css
+++ b/frontend/src/pages/login/Login.css
@@ -95,4 +95,22 @@
   opacity: 0;
   animation: fadeIn 2s ease-in-out forwards;
   animation-delay: 6s;
+}
+
+/* ── Login Responsive ────────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .login-card {
+    max-width: 100%;
+    margin: 0 0.75rem;
+    padding: 1.5rem;
+    padding-top: 6rem;
+  }
+
+  .login-tagline {
+    margin-top: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 1.25rem;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/subscribe/subscribe.css b/frontend/src/pages/subscribe/subscribe.css
index d8e4e81..1cc99a9 100644
--- a/frontend/src/pages/subscribe/subscribe.css
+++ b/frontend/src/pages/subscribe/subscribe.css
@@ -235,4 +235,26 @@
   font-size: 0.8rem;
   margin: 0;
   font-style: italic;
+}
+
+/* ── Subscribe Responsive ────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .subscribe {
+    padding-top: 1.5rem;
+  }
+
+  .subscribe__card {
+    padding: 1.25rem;
+  }
+
+  .progress-bar__connector {
+    width: 24px;
+  }
+
+  .progress-bar__dot {
+    width: 26px;
+    height: 26px;
+    font-size: 0.75rem;
+  }
 }
\ No newline at end of file