ghndrx/k8s-game-2048
1
0
Fork 0
mirror of https://github.com/ghndrx/k8s-game-2048.git synced 2026-02-10 06:45:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix container width overflow - v2.0.5

Browse Source 
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!
This commit is contained in:
Greg
2025-07-01 14:37:03 -07:00
parent ecae4e3af0
commit c05d9b22ae
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048 Game - v2.0.4</title>
<title>2048 Game - v2.0.5</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>

9
src/style.css
View File

@@ -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;
}
}