fix button size in small screens

GabrielCzar · GabrielCzar · commit c000b0c9c133 · 2018-12-07T19:42:37.000-03:00
diff --git a/index.html b/index.html
@@ -11,20 +11,20 @@
 
 <body>
     <main>
-        <div class="container">
-            <h1>Render Raw Gist</h1>
+        <h1>Render Raw Gist</h1>
 
-            <div>
-                <input id="urlHtml" placeholder="HTML raw gist file url" />
+        <div>
+            <input id="urlHtml" placeholder="HTML raw gist file url" />
 
-                <input id="urlCss" placeholder="CSS raw gist file url" />
-            </div>
+            <input id="urlCss" placeholder="CSS raw gist file url" />
+        </div>
 
+        <div class="container">
             <button onclick="renderContent()">Render</button>
         </div>
     </main>
 
-    <script src="app.js"></script>
+<script src="app.js"></script>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -32,7 +32,6 @@ input {
     padding: 14px;
     border: none;
     border-bottom: 1px solid white;
-    width: 300px;
     outline: white;
     line-height: 1.5em;
     background-color: transparent;
@@ -52,7 +51,7 @@ input {
 }
 
 button {
-    width: 10vw;
+    width: 300px;
     margin: 23px;
     padding: 12px 34px 12px 34px;
     border: 1px solid white;
@@ -87,4 +86,10 @@ button:hover {
     display: flex;
     flex-flow: column;
     align-items: center;
+}
+
+@media (max-width: 700px) {
+    input {
+        width: 90%;
+    }
 }
