From c05d9b22aea0111842603057824bd51e2038036f Mon Sep 17 00:00:00 2001 From: Greg Date: Tue, 1 Jul 2025 14:37:03 -0700 Subject: [PATCH] Fix container width overflow - v2.0.5 CRITICAL FIX: The game layout was cramped because: - Container was 512px + 20px padding = 552px total width - Game container inside was trying to be 512px wide - This caused horizontal overflow and terrible margins Fixed by: - Increasing container width to 580px to properly contain 512px game - Improving responsive design for mobile (640px breakpoint) - Adding proper centering for game container on mobile - Updating to version 2.0.5 The game should now have proper spacing and not look cramped! --- src/index.html | 2 +- src/style.css | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index f4bee25..8675eb2 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - 2048 Game - v2.0.4 + 2048 Game - v2.0.5 diff --git a/src/style.css b/src/style.css index a538006..54453c6 100644 --- a/src/style.css +++ b/src/style.css @@ -26,7 +26,7 @@ h1.title { } .container { - width: 512px; + width: 580px; margin: 0 auto; padding: 20px; } @@ -387,15 +387,15 @@ h1.title { } /* Additional responsive improvements */ -@media screen and (max-width: 600px) { +@media screen and (max-width: 640px) { body { padding: 20px 10px; } .container { width: 100%; - max-width: 480px; - padding: 10px; + max-width: 520px; + padding: 15px; } .header h1 { @@ -407,5 +407,6 @@ h1.title { max-width: 480px; height: auto; aspect-ratio: 1; + margin: 0 auto; } }