Update: Fixed responsive stylings

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

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/Web-Version/about.html b/Web-Version/about.html
@@ -72,7 +72,7 @@
 </head>
 <body>
 <div class="container" style="text-align: center">
-    <h1>About 2048</h1>
+    <a style="text-decoration: none" href="../index.html"><h1>About 2048</h1></a>
     <p>
         <strong>What is 2048?</strong><br>
         2048 is a single-player sliding block puzzle game. The game's objective is to slide numbered tiles on a grid to combine them and create a tile with the number 2048. However, you can continue to play the game after reaching the goal to create higher numbers.

diff --git a/Web-Version/style.css b/Web-Version/style.css
@@ -25,11 +25,23 @@ body {
     overflow: hidden;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 700px) {
     #gameContainer {
         width: 90%;
         padding: 10px;
     }
+
+    #title {
+        font-size: 44px !important;
+    }
+
+    #subtitle {
+        font-size: 20px !important;
+    }
+
+    #scoreContainer {
+        font-size: 20px !important;
+    }
 }
 
 #title {
@@ -39,7 +51,7 @@ body {
 }
 
 #subtitle {
-    font-size: 24px;
+    font-size: 22px;
     color: #655b56;
     margin: 10px 0;
 }

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>2048 Game</title>
+    <title>2048 Game - A Simple Brain Teaser</title>
     <link rel="stylesheet" href="Web-Version/style.css">
     <link rel="icon" type="image/x-icon" href="images/favicon.ico">
     <link rel="manifest" href="manifest.json">
@@ -28,7 +28,7 @@
     </div>
     <script src="Web-Version/script.js"></script>
     <script>
-        document.getElementById('gameContainer').addEventListener('touchmove', function(e) {
+        document.getElementById('gridContainer').addEventListener('touchmove', function(e) {
             e.preventDefault();
         }, { passive: false });
     </script>