From 87be50e529e315179008b330e42c4901bc30f336 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Wed, 20 Mar 2024 16:48:19 -0400
Subject: [PATCH] Update: Fixed responsive stylings

---
 Web-Version/about.html |  1 +
 Web-Version/style.css  | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)
diff --git a/Web-Version/about.html b/Web-Version/about.html
index 535b63f..abe176c 100644
--- a/Web-Version/about.html
+++ b/Web-Version/about.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>About 2048 Game</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap" rel="stylesheet">
     <style>
         body {
diff --git a/Web-Version/style.css b/Web-Version/style.css
index 123777a..f2ce168 100644
--- a/Web-Version/style.css
+++ b/Web-Version/style.css
@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
 
-html {
-    overflow-y: hidden;
+html, body {
+    height: 100%;
 }
 
 body {
@@ -12,16 +12,24 @@ body {
     align-items: center;
     min-height: 100vh;
     margin: 0;
-    overflow-y: hidden;
 }
 
 #gameContainer {
     width: 500px;
+    max-width: 90%;
     margin: auto;
     padding: 20px;
     border-radius: 10px;
     background-color: #bbada0;
     box-shadow: 0 0 15px rgba(0,0,0,0.2);
+    overflow: hidden;
+}
+
+@media (max-width: 600px) {
+    #gameContainer {
+        width: 90%;
+        padding: 10px;
+    }
 }
 
 #title {
