added optimization for all screens

static/css/main.css

@@ -10,41 +10,177 @@ body {
     user-select: none;
 }
 
-#devices {
-    width: 840px;
-    height: 357px;
-    margin: 260px 40px;
-}
-
 #content p {
     font-family: 'Roboto', sans-serif;
 }
 
+#devices {
+    display: block;
+    width: 90%;
+    height: 90%;
+}
+
+@media (min-width: 0) {
+    #devices {
+        margin: 65% auto;
+    }
+
+    #title {
+        font-size: 2.5em;
+        margin-top: -160%;
+    }
+
+    #subtitle {
+        margin-top: -5%;
+    }
+
+    #description, #subtitle, #title {
+        text-align: center;
+    }
+
+    #google-play, #github {
+        width: 45%;
+        height: 45%;
+    }
+
+    #google-play {
+        margin-top: 51%;
+        margin-left: 5%;
+    }
+}
+
+@media (min-width: 576px) {
+    #devices {
+        margin: 50% auto;
+    }
+
+    #title {
+        font-size: 3em;
+        margin-top: -130%;
+    }
+
+    #google-play, #github {
+        width: 37%;
+        height: 37%;
+    }
+
+    #get-it-on {
+        margin-top: 5%;
+        text-align: center;
+    }
+}
+
+@media (min-width: 768px) {
+    #devices {
+        margin: 39% auto;
+    }
+
+    #title {
+        font-size: 3.5em;
+        margin-top: -110%;
+    }
+
+    #description {
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    #google-play, #github {
+        width: 30%;
+        height: 30%;
+    }
+
+    #get-it-on {
+        margin-top: 1%;
+        text-align: center;
+    }
+}
+
+@media (min-width: 992px) {
+    #devices {
+        margin: 30% auto;
+    }
+
     #title {
         font-size: 4em;
-    margin-top: -33%;
-    margin-left: 65%;
+        margin-top: -95%;
+    }
+
+    #description {
+        width: 70%;
+        margin: 0 auto;
+    }
+
+    #google-play, #github {
+        width: 25%;
+        height: 25%;
+    }
+
+    #get-it-on {
+        margin-top: -2%;
+        text-align: center;
+    }
+}
+
+@media (min-width: 1200px) {
+    #devices {
+        margin: 25% auto;
+    }
+
+    #title {
+        font-size: 4.5em;
+        margin-top: -85%;
+    }
+
+    #description {
+        width: 55%;
+        margin: 0 auto;
+    }
+
+    #google-play, #github {
+        width: 20%;
+        height: 20%;
+    }
+
+    #get-it-on {
+        margin-top: -3%;
+        text-align: center;
+    }
+}
+
+
+@media (min-width: 1400px) {
+    #devices {
+        width: 50%;
+        height: 50%;
+        margin: 15% 2%;
+    }
+
+    #title {
+        font-size: 4em;
+        margin-top: -37%;
+        margin-left: 50%;
     }
 
     #subtitle {
         font-size: 2em;
-    margin-left: 58%;
-    margin-top: -1.3%;
+        margin-top: -2%;
+        margin-left: 50%;
     }
 
     #description {
-    font-size: 1.5em;
-    margin-left: 58%;
-    width: 600px;
-    height: 114px;
+        font-size: 1.1em;
+        width: 30%;
+        margin: 2% 60%;
     }
 
     #google-play, #github {
-    width: 315px;
-    height: 114px;
+        width: 35%;
+        height: 35%;
     }
 
     #get-it-on {
-    margin-left: 57%;
-    margin-top: 1%;
+        margin-top: -25%;
+        margin-left: 47%;
+    }
 }