Making Duration Mode Resonsive in Laptops and Large Devices

inj-krish19 · Sep 21, 2024 · 7f1e4ce · 7f1e4ce
1 parent e19b376
commit 7f1e4ce
Showing 1 changed file with 59 additions and 32 deletions.
diff --git a/css/Duration Mode.css b/css/Duration Mode.css
@@ -361,44 +361,76 @@
 
 }
 
-/*@media screen and (min-width : 750px) and (max-width : 1000px) {
+@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) {
+
+    .menuBar {
+        margin: -550px 0 0 50px;
+    }
+
     .Controller {
-        margin: -20% 0% 0% 105%;
+        margin: -300px 0 0 1100px;
     }
 
     .toolBox {
-        margin: -23% 0% 0% 10%;
+        margin: -200px 0 0 100px;
     }
 
     .scoreBoard {
-        margin: -35% 0% 0% 100%;
+        margin: 0 0 0 1100px;
     }
 
     .messageBoard {
-        margin: -55% 0% 0% 100%;
+        margin: -425px 0 0 1100px;
     }
 
     .alertBox {
-        margin: 0% 0% 0% 75%;
+        margin: -10px 0 0 700px;
     }
 
     .timer {
-        margin: -15% 0% 0% 100%;
+        margin: -450px 0 0 1050px;
     }
 
 }
 
-@media screen and (min-width : 550px) and (max-width : 750px) {
+@media screen and (min-width : 1001px) and (max-width : 4320px) {
     .Controller {
-        margin: -40% 0% 0% 120%;
+        margin: -300px 0 0 1100px;
+    }
+
+    .menuBar {
+        margin: -550px 0 0 50px;
+    }
+
+    .toolBox {
+        margin: -200px 0 0 100px;
+    }
+
+    .timer {
+        margin: -450px 0 0 1050px;
+    }
+
+    .scoreBoard {
+        margin: 0 0 0 1100px;
+    }
+
+    .alertBox {
+        margin: -615px 0 0 700px;
+    }
+
+}
+
+/*@media screen and (min-width : 750px) and (max-width : 1000px) {
+    .Controller {
+        margin: -20% 0% 0% 105%;
     }
 
     .toolBox {
         margin: -23% 0% 0% 10%;
     }
 
     .scoreBoard {
-        margin: -50% 0% 0% 120%;
+        margin: -35% 0% 0% 100%;
     }
 
     .messageBoard {
@@ -410,66 +442,61 @@
     }
 
     .timer {
-        margin: -25% 0% 0% 115%;
+        margin: -15% 0% 0% 100%;
     }
 
 }
 
-@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) {
+@media screen and (min-width : 550px) and (max-width : 750px) {
     .Controller {
-        margin: -25% 0% 0% 150%;
+        margin: -40% 0% 0% 120%;
     }
 
     .toolBox {
-        margin: -50% 0% 0% 25%;
+        margin: -23% 0% 0% 10%;
     }
 
     .scoreBoard {
-        margin: -60% 0% 0% 150%;
+        margin: -50% 0% 0% 120%;
     }
 
     .messageBoard {
-        margin: -60% 0% 0% 150%;
+        margin: -55% 0% 0% 100%;
     }
 
     .alertBox {
-        margin: -50% 0% 0% 115%;
+        margin: 0% 0% 0% 75%;
     }
 
     .timer {
-        margin: -50% 0% 0% 150%;
+        margin: -25% 0% 0% 115%;
     }
 
-}*/
-
-@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) {
-
-    .menuBar {
-        margin: -550px 0 0 50px;
-    }
+}
 
+@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) {
     .Controller {
-        margin: -300px 0 0 1100px;
+        margin: -25% 0% 0% 150%;
     }
 
     .toolBox {
-        margin: -200px 0 0 100px;
+        margin: -50% 0% 0% 25%;
     }
 
     .scoreBoard {
-        margin: 0 0 0 1100px;
+        margin: -60% 0% 0% 150%;
     }
 
     .messageBoard {
-        margin: -425px 0 0 1100px;
+        margin: -60% 0% 0% 150%;
     }
 
     .alertBox {
-        margin: -10px 0 0 700px;
+        margin: -50% 0% 0% 115%;
     }
 
     .timer {
-        margin: -450px 0 0 1050px;
+        margin: -50% 0% 0% 150%;
     }
 
-}
+}*/