alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix lobby header: use inline-grid for logo/title layout

Browse Source 
The 749px media query was triggering at mid-range widths, collapsing
the two-row logo+title into a single line. Fix by:
- Using inline-grid on h1 for bulletproof two-row layout
- Lowering single-line breakpoint from 749px to 500px
- Widening lobby container to 550px for title to fit naturally
- Constraining game controls to 400px max-width

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-24 00:22:34 -05:00
parent cce2d661a2
commit 26778e4b02
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/style.css
View File

@ -42,7 +42,7 @@ body {
/* Lobby Screen */ /* Lobby Screen */
#lobby-screen { #lobby-screen {
max-width: 400px; max-width: 550px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
@ -59,6 +59,7 @@ body {
/* Golf title - golf ball with dimples and shine */ /* Golf title - golf ball with dimples and shine */
.golf-title { .golf-title {
display: block;
font-size: 1.05em; font-size: 1.05em;
font-weight: 800; font-weight: 800;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@ -102,19 +103,27 @@ body {
} }
#lobby-screen h1 { #lobby-screen h1 {
width: fit-content; display: inline-grid;
margin: 0 auto; grid-template-columns: auto;
justify-items: start;
text-align: left; text-align: left;
row-gap: 2px;
} }
.logo-row { .logo-row {
display: block; margin-bottom: 0;
margin-bottom: -0.3em;
} }
@media (max-width: 749px) { #lobby-game-controls,
#auth-prompt {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 500px) {
#lobby-screen h1 { #lobby-screen h1 {
width: auto; display: block;
text-align: center; text-align: center;
text-indent: -18px; text-indent: -18px;
} }
@ -122,6 +131,9 @@ body {
display: inline; display: inline;
margin-bottom: 0; margin-bottom: 0;
} }
.golf-title {
display: inline;
}
} }
/* Golfer swing animation */ /* Golfer swing animation */