added more responsive fixes

rohit56-Igtm · May 21, 2018 · 99db3cc · 99db3cc
1 parent 68b0182
commit 99db3cc
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 14 deletions.
diff --git a/script/main.js b/script/main.js
@@ -189,17 +189,12 @@ tl
     },
     "-=2"
   )
-  .from(
-    ".hat",
-    0.5,
-    {
-      x: -100,
-      y: 350,
-      rotation: -180,
-      opacity: 0
-    },
-    "currentStep"
-  )
+  .from(".hat", 0.5, {
+    x: -100,
+    y: 350,
+    rotation: -180,
+    opacity: 0
+  })
   .staggerFrom(
     ".wish-hbd span",
     0.7,
@@ -267,6 +262,7 @@ tl
   );
 
 // tl.seek("currentStep");
+// tl.timeScale(2);
 
 // Restart on click
 const replyBtn = document.getElementById("replay");

diff --git a/style/style.css b/style/style.css
@@ -43,6 +43,8 @@ body {
 .one > img {
   vertical-align: middle;
   margin-bottom: 10px;
+  max-width: 100%;
+  height: auto;
 }
 
 .two {
@@ -115,6 +117,8 @@ body {
 
 .six img {
   display: inline-block;
+  max-width: 100%;
+  height: auto;
 }
 
 .six .hat {
@@ -240,11 +244,47 @@ body {
   }
 }
 
-@media screen and (max-height: 600px) {
+@media screen and (max-height: 700px) {
+  .six .hat {
+    left: 32%;
+  }
+}
+
+@media screen and (max-height: 850px) and (max-width: 450px) {
+  .six .hat {
+    left: 32%;
+  }
+}
+
+@media screen and (max-width: 500px) {
   .container {
-    width: 95%;
+    width: 90%;
+  }
+
+  .four .text-box {
+    width: 90%;
   }
+
+  .text-box .fake-btn {
+    right: 5px;
+    bottom: -38px;
+  }
+
+  .idea-5 span {
+    display: block;
+  }
+
+  .idea-6 span {
+    font-size: 10rem;
+  }
+
   .six .hat {
-    left: 34%;
+    width: 50px;
+    top: -20px;
+  }
+
+  .nine p {
+    font-size: 1.5rem;
+    font-weight: lighter;
   }
 }