tablet responsiveness

YadavAkhileshh · Nov 10, 2024 · b6a415b · b6a415b
1 parent 7fb8aeb
commit b6a415b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/Alien.css b/Alien.css
@@ -793,3 +793,33 @@ body.dark-theme #instructionsTitle {
     padding-left: 0;
   }
 }
+@media (min-width: 768px) and (max-width: 1024px){
+  .navbar{
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    gap: 5px;
+
+  }
+  .navbar a{
+    padding: 0;
+  }
+  .slider{
+    visibility: hidden;
+  }
+  #gameControls.header {
+    flex-direction: column;
+    width: 50%;
+  }
+  #gameControls{
+    margin-left: 10px;
+  }
+  .sidebar{
+    height: auto;
+  }
+  #gameCanvas{
+    width: 100%;
+  }
+  #startButton{
+    transform: translate(0px, 0px);
+  }
+}
diff --git a/index.html b/index.html
@@ -686,7 +686,7 @@ <h2 class="uppercase">What power-up do you find most helpful?</h2>
         </div>
         <button id="pauseBtn" style="transform: translate(0px, 0px);">Pause</button>
         <div class="controlGroup">
-            <button id="startButton"><i class="fas fa-play"></i> Start Game</button>
+            <button id="startButton"><i class="fas fa-play" style="transform: translate(0px, 0px);" ></i> Start Game</button>
             <button id="pauseButton" style="display: none"><i class="fas fa-play"></i> Game paused</button>
             <button id="restartButton" style="display: none"><i class="fas fa-redo"></i> Play Again </button>
         </div>