Could someone please help me to stop my website pages from moving left and right in mobile view?
Topic summary
A Shopify store using the Prestige theme experienced horizontal scrolling issues on mobile devices, where pages moved left and right instead of staying fixed.
Root Cause:
A container element exceeded the screen width on mobile view, causing the unwanted horizontal movement.
Solutions Provided:
-
Option 1: Add CSS code targeting
select#country_codewithwidth: 100% !important;to the theme.scss.css file via Admin > Online store > Themes > Edit code > Assets folder -
Option 2: Insert custom CSS code in the theme.liquid file before the closing
</body>tag
Both solutions included screenshots showing the problematic container and implementation steps.
Resolution:
The issue was successfully resolved after implementing one of the suggested fixes. The original poster confirmed the problem was solved.
1 Like
Hi @Ellibelle ,
There is a container that exceeds the width of the screen (See image below). I am not sure how this html being rendered but you can try the code below if the style can affect the said container.
- From your Admin page, go to Online store > Themes > click the three dots > Edit code
- Find the Asset folder, and open the theme.css file
- Add the code below at the very end of the file
select#country_code {
width: 100% !important;
}
1 Like
Hi @Ellibelle
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly
1 Like
Thank you so much. This solved the problem!
1 Like