make game responsive

jan-xyz · Feb 10, 2024 · b3530ac · b3530ac
1 parent 7345f82
commit b3530ac
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/styles.css b/styles.css
@@ -24,11 +24,19 @@ html, body {
 
 /* Game field */
 .game-field {
-  display: flex;
   align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  height: 400px;
+  height: 100px;
+  max-width: 400px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+@media (max-width: 600px) {
+  .game-field {
+    grid-template-columns: repeat(1, 4fr);
+  }
 }
 
 /* button */

diff --git a/ui.go b/ui.go
@@ -65,9 +65,9 @@ func (g *ui) Render() app.UI {
 		ctx.NewAction(eventNewGame)
 	})
 	return app.Div().Class("fill", "background").Body(
-		gameField,
 		gameStateText,
 		newGameButton,
+		gameField,
 	)
 }