Fix Media Query for Laptop and Mobile Devices 90%

markdavepanado · Mar 13, 2020 · 2909642 · 2909642
1 parent f800733
commit 2909642
Showing 1 changed file with 58 additions and 20 deletions.
diff --git a/style.css b/style.css
@@ -346,36 +346,36 @@ body {
   align-items: center;
 }
 
-@media only screen and (max-width: 1024px) {
-  .key-container .key {
-    margin: 5px;
+@media only screen and (max-width: 1050px) {
+  .help-text-container h1 {
+    font-size: 1.2em;
   }
 
-  .hh-container .key {
-    height: 100px;
-    width: 100px;
-    margin: 5px;
+  .help-text-container div {
+    font-size: 1.1em;
   }
 
   .header-text-container {
     width: 40%;
   }
+}
 
-  /* .header-text-container img {
-    width: 100%;
-  } */
-
-  .help-text-container h1 {
-    font-size: 1.2em;
+@media only screen and (max-width: 1024px) {
+  .key-container .key {
+    margin: 5px;
   }
 
-  .help-text-container div {
-    font-size: 1.1em;
+  .hh-container .key {
+    height: 100px;
+    width: 100px;
+    margin: 5px;
   }
+}
 
-  .help-text-container img {
-    width: 25%;
-    left: -25%;
+@media only screen and (max-width: 960px) {
+  .help-text-container div {
+    line-height: 2em;
+    padding: 0;
   }
 }
 
@@ -393,13 +393,25 @@ body {
   .header-text-container {
     width: 50%;
   }
+
+  .img-help-text-container .img-help-translate-container .help-text-container {
+    padding: 30px;
+  }
 }
 
 @media only screen and (max-width: 840px) {
   .bass-hh-container div[data-key="66"] {
     height: 150px;
     width: 150px;
   }
+
+  .help-text-container hr {
+    margin: 5px 0;
+  }
+
+  .img-help-text-container {
+    width: 40%;
+  }
 }
 
 @media only screen and (max-width: 768px) {
@@ -412,6 +424,10 @@ body {
     flex-direction: row;
     margin-top: 10px;
   }
+
+  .img-help-text-container {
+    width: 45%;
+  }
 }
 
 @media only screen and (max-width: 700px) {
@@ -454,16 +470,32 @@ body {
     height: 120px;
     width: 120px;
   }
+
+  .header-text-container {
+    top: 5px;
+    border-radius: 50px;
+    height: 8vh;
+  }
+
+  .header-text-container img {
+    width: 70%;
+  }
+
+  .img-help-text-container {
+    display: none;
+  }
+
+  .youpress-text-container {
+    display: none;
+  }
 }
 
 @media only screen and (max-width: 570px) {
   .hh-container .key {
     height: 100px;
     width: 100px;
   }
-}
 
-@media only screen and (max-width: 570px) {
   .key-container .key,
   .hh-container .key {
     margin: 5px;
@@ -480,6 +512,12 @@ body {
   }
 }
 
+@media only screen and (max-width: 500px) {
+  .header-text-container img {
+    width: 90%;
+  }
+}
+
 /* not finished media query */
 @media only screen and (max-width: 460px) {
   .bass-hh-container div[data-key="66"] {