From 636d7c656b279111a5bf9aad6727762164c5680b Mon Sep 17 00:00:00 2001
From: rav4s <ravidhruvishshah@gmail.com>
Date: Fri, 2 Apr 2021 09:59:13 -0500
Subject: [PATCH] make it mobile responsive

---
 www/css/styles.css | 23 +++++++++++++++++++++++
 www/index.html     |  6 +++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/www/css/styles.css b/www/css/styles.css
index d83ca7a..d4e5868 100644
--- a/www/css/styles.css
+++ b/www/css/styles.css
@@ -76,6 +76,18 @@ a:hover {
   transform: translate(-50%, -50%);
 }
 
+.input-box {
+  margin-top: 1em;
+  padding: 0.5em;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
+
+.input-submit {
+  margin-top: 1em;
+  padding: 0.5em;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
+
 #footer {
   text-align: center;
   margin-top: 1em;
@@ -116,3 +128,14 @@ a:hover {
 .main-heading h1 {
   font-size: 2em;
 }
+
+@media only screen and (max-width: 800px) {
+  .input-div {
+    width: 100%;
+    top: 25%;
+  }
+
+  .input-box, .input-submit {
+    padding: 1em;
+  }
+}
diff --git a/www/index.html b/www/index.html
index ee7cefb..e04aabd 100644
--- a/www/index.html
+++ b/www/index.html
@@ -18,10 +18,10 @@
       <div class="input-div">
         <form class="dna-input" action="app.html" method="get">
           <label>
-            <h1>Please enter the DNA strand in the space below:</h1>
-            <input type="text" name="strand">
+            <h1>Please enter the DNA strand in the space below:</h1><br />
+            <input type="text" name="strand" placeholder="DNA Strand" class="input-box">
           </label>
-          <input type="submit" value="Submit">
+          <input type="submit" value="Submit" class="input-submit">
         </form>
       </div>
     </div>