My Shopify store’s mobile navigation is showing an irritating layout problem: on both iOS and Android screens the menu content spills past the viewport, forcing an unwanted horizontal scroll. I’ve traced the issue down to CSS and simply need a clean, well-commented snippet I can paste at the very bottom of theme’s base.css. Here’s what I already know: • The root cause is purely layout—no JavaScript changes necessary. • It affects every break-point under 768 px, covering all common iOS and Android devices. • All other menu functions work; only the overflowing content needs to be tamed. What I need from you: 1. A concise block of CSS that eliminates the overflow while preserving the current design language. 2. Comments explaining why each rule is added so future edits stay easy. 3. Confirmation the fix behaves consistently on iOS Safari, Chrome for Android, and desktop responsive preview tools. I’ll drop your code into base.css, clear cache, and test right away—so a fast turnaround and clear communication are key. If this goes smoothly there’s more Shopify theme polish work waiting.