How can I fix the mobile width issue in my online store?

[KonradRasmussen]

Hey Shopify Community.

I am currently facing an issue with the width of my shopify store on mobile specifically. There's no issue on desktop, but when I open my store on a mobile device, the width seems to be incorrect as I'm able to scroll to the right and see negative space. 

My store URL: https://troeffelshoppen.dk/ 

 

I am looking for any tips on how to solve this issue.

Thank you so much in advance

All the best,

Konrad

[NomtechSolution]

there are a few possible reasons and solutions to consider:

1. Theme settings: Check the customization settings of your Shopify theme to ensure that the mobile layout is correctly configured. Look for options related to mobile responsiveness, breakpoints, or viewport settings. Adjusting these settings may help resolve the width issue.

2. Custom CSS or code: If you have added custom CSS or modified the theme code, there might be a CSS rule or code snippet that is affecting the mobile layout. Review your customizations and make sure there are no conflicting styles or code that cause the width issue on mobile devices. Consider removing or modifying the problematic code.

[diego_ezfy]

@KonradRasmussen , do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.css and paste this at the bottom of the file:

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

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

[KonradRasmussen]

Hey Diego, thanks for the input.

I just pasted the code into my theme.scss.liquid file and I still don't see any changes on mobile sadly.

[diego_ezfy]

@KonradRasmussen what device are you experiencing this issue on? On my end the issue is gone. Essentially it happens due to the off screen animations sliding onto screen as you scroll down.

If the X boundaries are hidden with the code, it should be impossible to trigger the horizontal scroll.

[KonradRasmussen]

The problem occurs on any mobile device still. 

Just as I'm able to scroll down the page I also have the option to scroll to the right (horizontal) like shown on the image from my original message.

Do you have any idea on how to solve this? Thanks in advance.

[KalaKart]

@KonradRasmussen Did you find any solution to it. I am facing exactly the same issue can you please help me with that.