Making Racing Mode Resonsive in Laptops and Large Devices

inj-krish19 · Sep 20, 2024 · e19b376 · e19b376
1 parent dae47cd
commit e19b376
Showing 1 changed file with 47 additions and 22 deletions.
diff --git a/css/Racing Mode.css b/css/Racing Mode.css
@@ -341,78 +341,103 @@
 
 }
 
+@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 : 750px) and (max-width : 1000px) {
     .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: -350px 0 0 700px;
     }
 
 }
 
-@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: -23% 0% 0% 10%;
+        margin: -200px 0 0 100px;
     }
 
     .scoreBoard {
-        margin: -50% 0% 0% 120%;
+        margin: 0 0 0 1100px;
     }
 
     .messageBoard {
-        margin: -55% 0% 0% 100%;
+        margin: -425px 0 0 1100px;
     }
 
     .alertBox {
-        margin: 0% 0% 0% 75%;
+        margin: -615px 0 0 700px;
     }
 
-}*/
+}
 
-@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) {
+/*@media screen and (min-width : 750px) and (max-width : 1000px) {
+    .Controller {
+        margin: -20% 0% 0% 105%;
+    }
 
-    .menuBar {
-        margin: -550px 0 0 50px;
+    .toolBox {
+        margin: -23% 0% 0% 10%;
+    }
+
+    .scoreBoard {
+        margin: -35% 0% 0% 100%;
+    }
+
+    .messageBoard {
+        margin: -55% 0% 0% 100%;
+    }
+
+    .alertBox {
+        margin: 0% 0% 0% 75%;
     }
 
+}
+
+@media screen and (min-width : 550px) and (max-width : 750px) {
     .Controller {
-        margin: -300px 0 0 1100px;
+        margin: -40% 0% 0% 120%;
     }
 
     .toolBox {
-        margin: -200px 0 0 100px;
+        margin: -23% 0% 0% 10%;
     }
 
     .scoreBoard {
-        margin: 0 0 0 1100px;
+        margin: -50% 0% 0% 120%;
     }
 
     .messageBoard {
-        margin: -425px 0 0 1100px;
+        margin: -55% 0% 0% 100%;
     }
 
     .alertBox {
-        margin: -350px 0 0 700px;
+        margin: 0% 0% 0% 75%;
     }
 
-}
+}*/