fix: Back-to-top button position on very narrow screens (<483px)

**Problem:**
On screens narrower than 483px, the horizontal button layout caused overlap
between back-to-top button and other buttons due to limited width.

**Solution:**
Added media query for max-width: 483px to vertically stack back-to-top button:
- Moved back-to-top to LEFT side (left: 1.5rem)
- Positioned ABOVE info button (bottom: 5.5rem)
- Maintains 4rem vertical spacing between buttons (same as desktop)

**Layout behavior:**
- Above 900px: All buttons vertical on left side (desktop)
- 483px - 900px: Buttons horizontal at bottom center + back-to-top at bottom-right
- Below 483px: Buttons horizontal at bottom center + back-to-top stacked above info button (left side)

This prevents button overlap on narrow mobile devices while maintaining
consistent spacing and positioning.

Files modified: static/css/main.css
This commit is contained in:
juanatsap
2025-11-18 21:48:41 +00:00
parent cc6ca6e6ba
commit 8da442b248
+10
View File
@@ -2956,6 +2956,16 @@ html {
}
}
/* Very narrow mobile - Stack back-to-top above info button (left side) */
@media (max-width: 483px) {
.back-to-top {
/* Move to left side, above info button */
left: 1.5rem !important;
right: auto !important;
bottom: 5.5rem !important; /* 4rem above info button (1.5rem + 50px + gap) */
}
}
/* ========================================
Info Modal - Modern Glassmorphism Design
======================================== */