fix: make it responsive

shubhwebkul · Jul 9, 2017 · 3e3f74d · 3e3f74d
1 parent 11117c6
commit 3e3f74d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/css/style.css b/css/style.css
@@ -4,7 +4,8 @@ html, body {
 }
 
 body {
-  width: 750px;
+  font-size: 18px;
+  max-width: 800px;
   margin: 0 auto;
   color: black;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -42,14 +43,14 @@ header a:hover, footer a:hover {
 }
 
 main {
-  padding-bottom: 65px;   /* Height of the footer element + 10px padding */
+  padding-bottom: 70px;   /* Height of the footer element + 10px padding */
 }
 
 footer {
   left: 0;
   bottom: 0;
   width: 100%;
-  height: 55px;
+  height: 60px;
   position: absolute;
   text-align: center;
   border-top: 1px solid black;

diff --git a/index.html b/index.html
@@ -34,7 +34,7 @@ <h2><a href="/">RunMyCode</a></h2>
 
       <main class="text-center">
         <p>RunMyCode Online is an open source service to run code online from browsers</p>
-        <iframe style="border: 1px solid;" width="708" height="398" src="https://www.youtube.com/embed/iwz8n3v7QVY?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
+        <iframe style="border: 1px solid; width: 99%;" height="445" src="https://www.youtube.com/embed/iwz8n3v7QVY?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
 
         <h4 id="action-msg">Get a key by authenticating below. <a href="faq.html#auth">Why?</a></h4>
         <div class="menu" id="auth-buttons">