How can i reduce the width of my website on mobile

Store Design

Topic summary

A user is experiencing a mobile layout issue where their website extends beyond the screen width, allowing unwanted horizontal scrolling. They previously tried a fix that resolved the width problem but broke their sticky header functionality.

Proposed Solutions:

  • EvinceDev suggested adding CSS code (overflow-x: hidden and width: 100% to body/html elements) to prevent horizontal scrolling
  • The original poster confirmed this fixed the width issue but caused the header to stop staying fixed at the top during scrolling
  • Kyle_liu offered a modified solution adding position: relative to the CSS, which may resolve both the width and sticky header issues

Current Status:
The discussion remains open as the user is testing the latest CSS suggestion. The site (wonnky.com) is temporarily using the partial fix that resolves width but affects header behavior.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
5

Thanks, it does resolve the width issue, but it creates another issue with my header which doesn’t sticks to the top of the screen as i scroll down, even though it is activated to always stay fixed at the top.

I’ll let the code like this for now, so you can see by yourself.