From 8da442b248f854758a27d9f61dedd67a8627ac8d Mon Sep 17 00:00:00 2001 From: juanatsap Date: Tue, 18 Nov 2025 21:48:41 +0000 Subject: [PATCH] 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 --- static/css/main.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/static/css/main.css b/static/css/main.css index 34140bb..0072b52 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -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 ======================================== */