Merge pull request #26 from thepurplebubble/email-form-update

prevent form scroll overlap
thepurplebubble · Dec 21, 2023 · 0dc44db · 0dc44db
2 parents ca69e89 + 8152093
commit 0dc44db
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 10 deletions.
diff --git a/src/components/Email-Form.astro b/src/components/Email-Form.astro
@@ -1,4 +1,4 @@
-<div id="email-form">
+<div id="email-form" class="emailform">
   <div class="signup-container">
     <div class="signup-container1">
       <div class="signup-container2">
@@ -67,20 +67,19 @@
 </div>
 
 <style>
-  @media (max-width: 600px) {
-    form {
-      width: 100%;
-      position: static;
-      transform: none;
-    }
-  }
-
-  #email-form {
+  .emailform {
     transform: translateY(33em);
     visibility: hidden;
     position: absolute;
   }
 
+  @media (max-width: 825px) {
+    .emailform {
+      position: absolute;
+      transform: translateY(-7em);
+    }
+  }
+
   form {
     display: flex;
     flex-direction: column;
@@ -95,6 +94,12 @@
     border: 1px solid var(--dl-color-gray-white); /* added white border */
   }
 
+  @media (max-width: 825px) {
+    form {
+      width: 95%;
+    }
+  }
+
   input[type="text"],
   input[type="email"] {
     width: 100%;

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" id="emailbr"></span>
         <button class="chevron-button" id="chevron-button"></button>
         <div class="home-features">
           <div class="home-container1">
@@ -143,6 +144,7 @@ import "../styles/index.css";
   const buttons = document.querySelectorAll("[form-button]");
   const scroll = document.getElementById("chevron-button");
   const form = document.getElementById("email-form");
+  const emailbr = document.getElementById("emailbr");
 
   form.style.visibility = "hidden";
 
@@ -154,9 +156,11 @@ import "../styles/index.css";
     if (form.style.visibility == "hidden") {
       form.style.visibility = "visible";
       scroll.style.visibility = "hidden";
+      emailbr.classList.add("show");
     } else {
       form.style.visibility = "hidden";
       scroll.style.visibility = "visible";
+      emailbr.classList.remove("show");
     }
   }
   scroll.addEventListener("click", () => {
@@ -168,3 +172,59 @@ import "../styles/index.css";
     });
   });
 </script>
+
+<style>
+  .emailbr {
+    display: block;
+    margin: 0px 0;
+  }
+
+  @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.show {
+      display: block;
+      margin: 140px 0;
+    }
+  }
+</style>