Update: Fixed responsive stylings

hoangsonww · Mar 20, 2024 · 87be50e · 87be50e
1 parent 91b36b7
commit 87be50e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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 {