feat: responsive mobile UI across all pages
Build & Deploy / build-and-deploy (push) Successful in 50s
Build & Deploy / build-and-deploy (push) Successful in 50s
Global: - Viewport meta already present; added -webkit-text-size-adjust: 100% - Container padding reduces to 12px on mobile (was 24px) - Smaller heading sizes (h1: 1.5rem, h2: 1.25rem) - Buttons get min-height 40px for touch targets - Inputs forced to 16px font-size to prevent iOS zoom - Thinner scrollbar on mobile Header: - Logo text shrinks to 1rem on mobile, icon to 28px - Header padding reduces to 12px Library: - Toolbar stacks vertically on mobile, full-width inputs - Grid forced to 2 columns on narrow screens (480px), reduced gap GameCard: - Smaller info text, padding, badge on 480px screens GameDetail: - Cover section capped at 200px width on mobile - Media thumbnails shrink to 160x90 - Scrape header stacks vertically with full-width buttons - Edit rows stack vertically on mobile Play: - DOS container caps at 50vh on mobile, smaller border-radius - Overlay text/icon sizes reduced, more compact layout
This commit is contained in:
@@ -52,6 +52,7 @@
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -170,6 +171,19 @@ input::placeholder {
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.container { padding: 0 12px; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
RESPONSIVE TOUCH ADJUSTMENTS
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
@media (max-width: 640px) {
|
||||
h1 { font-size: 1.5rem; }
|
||||
h2 { font-size: 1.25rem; }
|
||||
.btn { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; }
|
||||
input, textarea, select { font-size: 16px; } /* prevents iOS zoom */
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
SCROLLBAR
|
||||
|
||||
Reference in New Issue
Block a user