Add styling for mobile breakpoint

heartofclojure · Apr 16, 2024 · 6d4a6be · 6d4a6be
1 parent 2629c8f
commit 6d4a6be
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/css/basics.css b/css/basics.css
@@ -24,12 +24,30 @@ section {
   text-align: center;
 }
 
+@media only screen and (max-width: 600px) {
+  section {
+    margin-top: 0rem;
+    padding: 1rem;
+  }
+}
+
 .intro {  
   margin-top: 3rem;
   text-align: center;
   width: 60vw;
 }
 
+.form-input {
+  display: flex;
+  flex-direction: row;
+}
+
+@media only screen and (max-width: 600px) {
+  .form-input {
+    flex-direction: column;
+  }
+}
+
 .tickets {
   margin-top: 0;
   padding-top: 0;

diff --git a/css/form.css b/css/form.css
@@ -14,7 +14,7 @@ input {
   align-items: center;
 }
 
-#signup-form h2 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-}
+@media only screen and (max-width: 600px) {
+  #signup-form {
+  }
+}
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@ <h2>Sponsor Us</h2>
   <div class="content-wrapper">
     <form onsubmit="subscribe(event)" id="signup-form">
       <h2>Stay up to date</h2>
-      <div class="flex items-center">
+      <div class="form-input">
         <input type="email" id="email" name="email" placeholder="Your email address" required/>
         <input type="submit" value="Subscribe" class="button-link">
       </div>