How do I get rid of this white spot on mobile mode?

Store Design
, ,

Topic summary

A user encountered a white space issue on their mobile site after making custom CSS changes while trying to adjust product description and image widths. The problem manifested as unusual spacing with horizontal scrolling.

Diagnosis:
The issue was identified as excess right-side margin in the CSS file.

Solution provided:

  • Navigate to: Admin → Online Store → Themes → three dots → Edit code
  • Locate the Asset folder and open theme.css
  • Add CSS code targeting sections with IDs starting with “MainProductTemplate” to set overflow: hidden
  • Insert the code at the end of the theme.css file

Outcome:
The solution successfully resolved the white space issue. The thread appears closed with the problem fixed.

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

I did a lot of custom coding on the website and changed a lot of css code. This morning I was trying to fix width of the description and the main picture. Don’t remember what it was and now on mobile it looks weird. With scrolling to the side. Please help. thank you. my website is blastprox.com

SharedScreenshot.jpg
SharedScreenshot.jpg965×898 55.5 KB

1 Like
2

This issue is due to margin on right side in css file. You can remove it in theme.css file in theme code.

3

What class exacly?

4

Hi @vrulaz02

Please use the code below to fix the issue.

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the theme.css file
  3. Add the code below at the very end of the file
.shopify-section:has([id^="MainProduct-template"]) {
    overflow: hidden;
}
1 Like
5

Thank you so much! omg you are legend :blush: