From b694fb764180618ac6b8dd9574e9c6bef47f5cc9 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 21:33:46 -0600
Subject: [PATCH] mobile layout fixes

---
 web/app/globals.css | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/web/app/globals.css b/web/app/globals.css
index fb521491..bd87fc76 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -2891,7 +2891,8 @@ body {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-left: auto;
+    grid-column: 3;
+    justify-self: end;
   }
 
   .nav-links,
@@ -3105,3 +3106,35 @@ img, video, iframe {
 .pagination-btn { background: #333; color: white; border: none; border-radius: 8px; padding: 0.5rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
 .pagination-btn:disabled { background: #ccc; cursor: not-allowed; }
 .pagination-info { font-size: 0.9rem; color: #555; font-weight: 500; }
+
+@media (max-width: 768px) {
+  .info-title {
+    font-size: 2rem;
+  }
+  .info-subtitle {
+    font-size: 1.1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .info-title {
+    font-size: 1.6rem;
+  }
+  .info-subtitle {
+    font-size: 1rem;
+  }
+  .image-links-container {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  .adopt-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+}
+
+@media (max-width: 360px) {
+  .adopt-grid {
+    grid-template-columns: 1fr;
+  }
+}