From 6d4a6bea276f4d04e35319914954cd1552c49979 Mon Sep 17 00:00:00 2001
From: Sonja Vilches <sonja@MacBook-Pro-2.fritz.box>
Date: Tue, 16 Apr 2024 13:59:56 +0200
Subject: [PATCH] Add styling for mobile breakpoint

---
 css/basics.css | 18 ++++++++++++++++++
 css/form.css   |  8 ++++----
 index.html     |  2 +-
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/css/basics.css b/css/basics.css
index 72d38d9..2c7cf4f 100644
--- 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
index 855a390..f5c4043 100644
--- 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 {
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 92cfa4a..558cd74 100644
--- 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>