mobile responsiveness addd

FranklinBarto · Feb 12, 2024 · 7f624cb · 7f624cb
1 parent 9d546f5
commit 7f624cb
Showing 1 changed file with 33 additions and 7 deletions.
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -155,18 +155,44 @@
     transform: none;
   }
 }
+@media (max-width: 640px) {
+  // Hide one item on the nav links to stop overlapping text
+  nav {
+    .links {
+      a:nth-child(1){
+        display: none;
+      }
+    }
+  }
+}
 
 /* Mobile */
-@media (max-width: 700px) {
+@media (max-width: 820px) {
   .content {
     padding: 4rem;
   }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
+  .main{
+    .hero {
+      padding-top: 15vh;
+      h1 {
+        color: white;
+        font-size: 4rem;
+      }
+      p {
+        width: 70vw;
+      }
+      a {
+        padding: 10px 20px;
+        margin: 20px auto;
+      }
+    }
+    .grid {
+      grid-template-columns: 1fr;
+      margin-bottom: 120px;
+      max-width: 320px;
+      text-align: center;
+      margin-top: 10vh;
+    } 
   }
 
   .card {