feat: responsiveness in index.astro

thepurplebubble · Dec 20, 2023 · 5a82776 · 5a82776
1 parent eae2b2e
commit 5a82776
Showing 1 changed file with 51 additions and 0 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -37,6 +37,7 @@ import "../styles/index.css";
           </div>
         </div>
         <EmailForm />
+        <span class="emailbr"></span>
         <button class="chevron-button" id="chevron-button"></button>
         <div class="home-features">
           <div class="home-container1">
@@ -168,3 +169,53 @@ import "../styles/index.css";
     });
   });
 </script>
+
+<style>
+  @media (max-width: 825px) {
+    .home-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .home-container1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .home-container2 {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .home-btn-group {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .home-text1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .home-features {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .home-lottie-node {
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+    .emailbr {
+      display: block;
+      margin: 140px 0;
+    }
+  }
+</style>