Fix projects mobile viewing

1 files changed, 22 insertions, 19 deletions

diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 0fe7e5d..d5f97c9 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -99,26 +99,29 @@ import ShapesBackground from "../components/ShapesBackground.astro";
   <SocialNavbar />
   <ShapesBackground />
   <style>
+    
     main {
-      margin: auto;
-      padding: 1rem;
-      width: 1200px;
-      color: white;
-      font-size: 20px;
-      line-height: 1.6;
-    }
-    .link-card-grid {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(24ch, 1fr));
-      gap: 2rem;
-      padding: 0;
-    }
-    @media (max-width: 768px) {
-    .link-card-grid {
-      display: grid;
-      grid-template-columns: repeat(1, minmax(12ch, 1fr));
-      gap: 2rem;
-      padding: 0;
+    margin: auto;
+    padding: 1rem;
+    max-width: 1200px;
+    color: white;
+    font-size: 20px;
+    line-height: 1.6;
+}
+.link-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(24ch, 1fr));
+  gap: 2rem;
+  padding: 0;
+}
+    @media (max-width: 1020px) {
+      .link-card-grid {
+        display: grid;
+        grid-template-columns: repeat(1, minmax(24ch, 1fr));
+        gap: 2rem;
+        padding: 0;
+        width: 100%;
+      }
     }
   </style>
 </Layout>