Use width:fit-content on h1 for bulletproof logo-title alignment
The h1 shrinks to its widest child (GolfCards.club), centers via margin auto, and text-align left aligns both lines within it. No breakpoint-dependent transforms needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d32ae83ce2
commit
1b748470a0
@ -101,8 +101,9 @@ body {
|
|||||||
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.25));
|
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.25));
|
||||||
}
|
}
|
||||||
|
|
||||||
#lobby-screen h1,
|
#lobby-screen h1 {
|
||||||
#lobby-screen .logo-row {
|
width: fit-content;
|
||||||
|
margin: 0 auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,12 +114,10 @@ body {
|
|||||||
|
|
||||||
@media (max-width: 749px) {
|
@media (max-width: 749px) {
|
||||||
#lobby-screen h1 {
|
#lobby-screen h1 {
|
||||||
|
width: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-indent: -18px;
|
text-indent: -18px;
|
||||||
}
|
}
|
||||||
#lobby-screen .logo-row {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.logo-row {
|
.logo-row {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user