space out arrow controls for mobile version

NLie2 · Aug 18, 2023 · 46fac8f · 46fac8f
1 parent 75c0349
commit 46fac8f
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 10 deletions.
diff --git a/assets/tetris_i.png b/assets/tetris_i.png
diff --git a/assets/tetris_j.png b/assets/tetris_j.png
diff --git a/assets/tetris_l.png b/assets/tetris_l.png
diff --git a/assets/tetris_o.png b/assets/tetris_o.png
diff --git a/assets/tetris_s.png b/assets/tetris_s.png
diff --git a/assets/tetris_t.png b/assets/tetris_t.png
diff --git a/assets/tetris_z.png b/assets/tetris_z.png
diff --git a/index.html b/index.html
@@ -40,9 +40,11 @@ <h4>Current Block</h4>
     <div class="board"></div>
 
     <div class="controls">
-      <button id="left"> &lt  </button>
-      <button id="right"> &gt </button>
-      <button id="down"> v  </button>
+      <div id="left-right">      
+        <button id="left"> &lt </button>
+        <button id="right"> &gt </button>
+      </div>
+      <button id="down"> v </button>
     </div>
 
 

diff --git a/styles/main.css b/styles/main.css
@@ -65,22 +65,23 @@ main{
   border: none; 
   width: 40vh; 
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
 }
 #left, #right, #down{
   width: 4rem; 
   margin: 0.5rem
 }
-
-#left{
-  margin-right: 10vh;
-}
-#right{
-  margin-left: 10vh;
+#left-right{
+  display: flex;
+  width: 40vh; 
+  justify-content: space-between;
 }
 
 
+
+
 /* PLAYER-INFO */
 
 .player-info{