/* ========================================================= mobile-viewport-lock.css Locks every page to the device viewport on mobile so the user never has to scroll left/right. Apply globally — this stylesheet is loaded near the end of so it wins against legacy page CSS without needing markup changes. ========================================================= */ html, body { max-width: 100vw; overflow-x: hidden !important; -webkit-text-size-adjust: 100%; } /* Use 100% (not 100vw) for layout roots so the scrollbar gutter doesn't push content off-screen on desktop, and so iOS Safari's URL-bar resize doesn't introduce a horizontal jiggle on mobile. */ body { width: 100%; position: relative; } /* Defensive: any fixed-pixel container that exceeds the viewport on small screens gets clamped instead of triggering a horizontal scrollbar. */ @media (max-width: 1024px) { body * { max-width: 100%; } img, svg, video, canvas, iframe, picture, embed, object { max-width: 100%; height: auto; } /* Tables are the #1 cause of horizontal scroll on mobile. */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Common app containers — keep them inside the viewport. */ .container, .wg-container, .wg-shell-nav-inner, .wg-shell-footer-inner, .footer-content, .header-flex, main, section, header, footer { max-width: 100%; width: 100%; box-sizing: border-box; } .container, .wg-container { padding-left: 16px; padding-right: 16px; } } /* On true phone widths, tighten the gutters and force-grid any flex rows that were tuned for desktop only. */ @media (max-width: 560px) { .container, .wg-container { padding-left: 14px; padding-right: 14px; } /* Common offending layouts — collapse to a single column. */ .header-flex, .footer-content, .modules-grid, .quick-links-grid, .secondary-actions-section .container, .hero-stats { flex-wrap: wrap; } /* Buttons that overflow because of fixed padding on mobile. */ .btn, .start-workout-massive, .start-training-btn, .module-btn, .training-nav-btn { max-width: 100%; box-sizing: border-box; } /* Long unbroken strings (URLs, etc.) shouldn't blow out the layout. */ body, p, h1, h2, h3, h4, h5, h6, span, a, li { overflow-wrap: anywhere; word-break: break-word; } } /* iOS quirk: 100vh + sticky-to-bottom UI can momentarily force horizontal scroll during the URL-bar transition. The combo below pins the viewport without locking scroll. */ @supports (-webkit-touch-callout: none) { html { -webkit-overflow-scrolling: touch; } }