On Mobile Display, the site can be scrolled outside of the screen showing blank space

Store Design
, ,

Topic summary

A mobile display issue was reported where the website www.scorpioxsun.com.au could be scrolled horizontally, revealing blank space to the right of the page.

Problem Details:

  • The site extended beyond the viewport on mobile devices
  • User had custom CSS for fonts and other elements, making it difficult to identify the root cause

Solution Provided:

  • Add CSS code to the theme.css file (Themes → edit code → asset → theme.css)
  • Insert html, body { overflow-x: hidden !important; } at the bottom of the file
  • This prevents horizontal scrolling on mobile devices

Outcome:

  • The solution successfully resolved the issue
  • Thread appears to be resolved
Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hey guys!

I have an odd issue - when viewing this site: www.scorpioxsun.com.au (p/w: scorpiobasil) on mobile, If I scroll to the right, the site goes ‘off page’ and shows a big gap, so essentially i cant just scroll up or down, there seems to be blank space to the right.

I have a bit of custom .css for fonts and things, hoping someone might be able to pinpoint the issue, save me sieving through css. to find it ?

Screen Shot 2022-11-17 at 9.27.44 am.png
Screen Shot 2022-11-17 at 9.27.44 am.png1018×1468 124 KB

2

Hi @ByAprilCo
You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

html,body{
overflow-x: hidden!important;
}
2 Likes
3

YOU ARE AMAZING!!! Thank you so much!!!