From 808568345c3c18df4999e417093ad423f6acc05d Mon Sep 17 00:00:00 2001
From: Ankit Goel <ankitoct01@gmail.com>
Date: Thu, 1 Oct 2020 14:36:28 +0530
Subject: [PATCH] Made responsive for mobile view

---
 index.html | 55 +++++++++++++++++++++++++-------------------------
 styles.css | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 85 insertions(+), 29 deletions(-)
diff --git a/index.html b/index.html
index 08ca0d4..239a775 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CodeRunner</title>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <link rel="stylesheet" href="styles.css" />
-    <script src="script.js" defer></script>
-  </head>
 
-  <body>
-    <div id="header">
-      <div id="logo">CodeRunner</div>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CodeRunner</title>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <link rel="stylesheet" href="styles.css" />
+  <script src="script.js" defer></script>
+</head>
 
+<body>
+  <div id="header">
+    <div id="logo">CodeRunner</div>
+    <div id="headerIcons">
       <button id="runBtn">Run</button>
       <div id="btnContainer">
         <div class="toggle-btn" id="html">HTML</div>
@@ -21,21 +22,19 @@
         <div class="toggle-btn" id="output">Output</div>
       </div>
     </div>
-    <div id="bodyContainer">
-      <textarea class="panelH" id="htmlTA" placeholder="Enter HTML"></textarea>
-      <textarea class="panel" id="cssTA" placeholder="Enter CSS"></textarea>
-      <textarea
-        class="panel"
-        id="jsTA"
-        placeholder="Enter Java Script"
-      ></textarea>
-      <div>
-        <p style="margin: 0px; color: grey" id="output-txt" class="panel">
-          Output
-        </p>
-        <hr />
-        <iframe id="outputDiv" class="panel"></iframe>
-      </div>
+  </div>
+  <div id="bodyContainer">
+    <textarea class="panelH" id="htmlTA" placeholder="Enter HTML"></textarea>
+    <textarea class="panel" id="cssTA" placeholder="Enter CSS"></textarea>
+    <textarea class="panel" id="jsTA" placeholder="Enter Java Script"></textarea>
+    <div>
+      <p style="margin: 0px; color: grey" id="output-txt" class="panel">
+        Output
+      </p>
+      <hr />
+      <iframe id="outputDiv" class="panel"></iframe>
     </div>
-  </body>
-</html>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 6c16803..09b4671 100644
--- a/styles.css
+++ b/styles.css
@@ -12,6 +12,10 @@ body {
     /* background-color:black; */
 }
 
+#headerIcons {
+    display: flex;
+}
+
 #logo {
     /* padding-right: 50px; */
     font-weight: bold;
@@ -25,7 +29,7 @@ body {
     /* margin-left: 20%; */
     /* background-color: #EBF3FF; */
     border: #EBF3FF 3px solid;
-    margin: 8px auto 8px 400px;
+    margin: 8px 100px 8px 400px;
     color: #227C7B;
     /* margin: 10px 10px 10px 0px; */
     background-color: white;
@@ -98,4 +102,57 @@ iframe {
 
 hr {
     background-color: #227C7B;
+}
+
+@media only screen and (max-width: 576px) {
+    #header {
+        flex-direction: column;
+        padding: 10px 0;
+        align-items: center;
+        box-sizing: border-box;
+    }
+
+    #logo {
+        font-size: 170%;
+    }
+
+    #headerIcons {
+        flex-direction: row-reverse;
+        flex-wrap: wrap;
+        margin: 2vw auto 1vw;
+        width: 67vw;
+        justify-content: space-around;
+        align-items: center;
+    }
+
+    .toggle-btn {
+        font-size: clamp(14px, 3vw, 16px);
+    }
+
+    #runBtn {
+        margin: 10px 0;
+    }
+
+    #btnContainer {
+        width: auto;
+        margin: 0;
+        padding: 0;
+    }
+
+    #bodyContainer {
+        flex-direction: column;
+        height: auto;
+    }
+
+    textarea {
+        height: 50vh;
+        width: 100%;
+        border: none;
+        border-bottom: 1px solid #227C7B;
+    }
+
+    iframe {
+        width: 100%;
+        height: 50vh;
+    }
 }
\ No newline at end of file
