Extra space on mobile (hidden overflow doesn’t work)

Technical Q&A
, ,

Topic summary

A user is experiencing unwanted horizontal space (green area) appearing on the right side of their mobile website across all pages. The issue emerged after code modifications, and standard overflow-x: hidden solutions either fail to resolve it or unintentionally cut off legitimate content.

Specific problems identified:

  • Extra spacing visible on mobile viewport
  • Accordion blocks showing additional spacing
  • Appearance resembles unwanted zoom

Proposed solutions:

  • Apply overflow: hidden to .resource-list__carousel for the product carousel section
  • Add media query targeting mobile devices with overflow-x: hidden on html/body elements

Current status:
The carousel-specific fix addresses overflow in that component but doesn’t resolve the site-wide issue. One responder notes they no longer see the problem on the homepage (possibly due to video removal) and cannot reproduce it on other pages, suggesting the issue may be isolated or partially resolved.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Please help! On the right side of my website (groovyroot.myshopify.com) there is extra green space on the right. I had been tinkering around my code and then it got like this. I thought I returned everything to normal but it’s still stuck. Also note the last item in accordion blocks have extra space for some reason? Ugh

Looks like it’s zoomed in? I tried multiple overflow-x hidden codes. It just cuts off parts of my website, so it’s not a fix. Please help, I’m desperate for a solution! Thank you

IMG_5148
IMG_51481290×2796 319 KB

3

Add this to the Product carousel (Featured collection?) section “Custom CSS” setting in Cusomizer:

.resource-list__carousel {
  overflow: hidden;
}
4

You can add this code to Custom CSS of theme settings to solve the issue.

@media (max-width: 749px) {
  html, body {
    overflow-x: hidden;
  }
}

Best regards,
Dan from Ryviu: Product Reviews App

5

Hi, thanks! I tried this already and although it fixes the overflow issue, it also cuts off content on most of my site pages.

6

Hi, thanks! This fixes the carousel overflow, but this issue is site-wide. The extra space on the right is present on every site page.

7

Hi, thanks! How does this explain this issue being site-wide on every page?

8

Frankly, I do not see it on other pages.
But I also do not see it anymore on homepage – looks like you’ve taken the video out?