White Space Right Side of Page on Mobile View

[Paranoia_1999]

I have this extra white space that grows larger the smaller the screen size gets. I tried most of the solutions found from others but to no avail. Can someone help?

[saim007]

@Paranoia_1999 Please share shopify store URL.

[Paranoia_1999]

Hi @saim007  , I apologize for the late response, here's my shopify store URL: https://ptmb86vf08sblie6-65523089652.shopifypreview.com I'm working on a new custom theme.

[saim007 · Accepted solution]

Hi @Paranoia_1999 Please just copy and paste below CSS code in your theme.liquid file above the </body> tag

<style>
img{
max-width: 100%;
}
.shopify-section.product-variant-slider-block__wrapper {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}
</style>

Above code will remove the white space but for your information your site is not Mobile-Responsive (Mobile-Friendly) so designing issue will occur in future. Please fix your issue with hiring web designer to overcome the issues and make your website fully mobile supportive.

Please let me know if works and please like mark as solve!

[Paranoia_1999]

Thank you for the response, this fixed the white space issue but a new one emerged. Now it has this scrollbar on the product slider block section, when I try to put overflow-y:hidden, it cuts the section and the marquee is not visible.

[saim007]

@Paranoia_1999 Just replace this line overflow-x: hidden; with this one overflow: hidden; in your jeff-mobile.css file.

[Paranoia_1999]

@saim007  I have found a work around on this, thank you.

[TrendyStitches]

Hey Saim,

i´m having the same problem with the right space on the right site. I figured out that the moving announcement bar is the reason for it. How can  i fix this problem? Your code above didn´t work. URL: TrendyStitches | Caps, Hats und Beanies für JEDEN