From 06ebdb94b9115901acb86266fdebfbb4e9d1114f Mon Sep 17 00:00:00 2001 From: Greg Date: Tue, 1 Jul 2025 15:07:18 -0700 Subject: [PATCH] Complete responsive grid overhaul - v2.0.6 - Full responsive design from mobile (320px) to widescreen (1200px+) - Flexbox-centered layout with proper aspect ratios - Game container scales perfectly on any screen size - clamp() CSS for fluid typography scaling - Mobile-first breakpoints with progressive enhancement - Proper padding and margins for all screen sizes - Fixed cramped layouts on all devices - Version 2.0.6 with bulletproof responsive grid --- src/index.html | 2 +- src/style.css | 115 ++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 95 insertions(+), 22 deletions(-) diff --git a/src/index.html b/src/index.html index 8675eb2..2730e60 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - 2048 Game - v2.0.5 + 2048 Game - v2.0.6 diff --git a/src/style.css b/src/style.css index 54453c6..62ae057 100644 --- a/src/style.css +++ b/src/style.css @@ -1,5 +1,9 @@ /* 2048 Game CSS - Knative Edition */ +* { + box-sizing: border-box; +} + html, body { margin: 0; padding: 0; @@ -11,7 +15,11 @@ html, body { } body { - padding: 40px 20px; + padding: 20px; + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 100vh; } .heading { @@ -26,23 +34,25 @@ h1.title { } .container { - width: 580px; + width: 100%; + max-width: 600px; margin: 0 auto; - padding: 20px; + padding: 0; } .header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 30px; + margin-bottom: 25px; flex-wrap: wrap; - gap: 15px; + gap: 10px; + padding: 0 15px; } .header h1 { color: #776e65; - font-size: 80px; + font-size: clamp(48px, 8vw, 80px); font-weight: bold; margin: 0; line-height: 1; @@ -111,13 +121,17 @@ h1.title { justify-content: space-between; align-items: center; margin-bottom: 20px; + padding: 0 15px; + flex-wrap: wrap; + gap: 15px; } .game-intro { line-height: 1.65; margin: 0; flex: 1; - margin-right: 20px; + margin-right: 15px; + font-size: clamp(14px, 2.5vw, 18px); } .restart-button { @@ -146,8 +160,10 @@ h1.title { touch-action: none; background: #bbada0; border-radius: 10px; - width: 512px; - height: 512px; + width: 100%; + max-width: 520px; + aspect-ratio: 1; + margin: 0 auto; box-sizing: border-box; } @@ -303,13 +319,15 @@ h1.title { } .game-explanation { - margin-top: 30px; + margin-top: 25px; text-align: center; line-height: 1.6; + padding: 0 15px; + font-size: clamp(14px, 2vw, 16px); } .game-explanation p { - margin: 10px 0; + margin: 8px 0; } .keep-playing-button, .retry-button { @@ -389,24 +407,79 @@ h1.title { /* Additional responsive improvements */ @media screen and (max-width: 640px) { body { - padding: 20px 10px; + padding: 15px; + align-items: center; } .container { - width: 100%; - max-width: 520px; - padding: 15px; + max-width: 100%; + } + + .header { + padding: 0 10px; + margin-bottom: 20px; } .header h1 { - font-size: 60px; + font-size: clamp(40px, 10vw, 60px); + } + + .above-game { + padding: 0 10px; + flex-direction: column; + align-items: stretch; + gap: 10px; + } + + .game-intro { + margin-right: 0; + text-align: center; + font-size: 16px; + } + + .restart-button { + align-self: center; + width: fit-content; } .game-container { - width: 100%; - max-width: 480px; - height: auto; - aspect-ratio: 1; - margin: 0 auto; + max-width: 100%; + width: calc(100vw - 30px); + max-width: 450px; + } +} + +@media screen and (max-width: 480px) { + body { + padding: 10px; + } + + .header h1 { + font-size: clamp(32px, 12vw, 48px); + } + + .game-container { + width: calc(100vw - 20px); + max-width: 400px; + padding: 10px; + } + + .scores-container { + gap: 8px; + } + + .score-container { + padding: 8px 12px; + min-width: 60px; + } +} + +@media screen and (min-width: 1200px) { + .container { + max-width: 650px; + } + + .game-container { + max-width: 550px; } }