A user is experiencing an issue where their mobile store’s screen can be dragged horizontally, creating unwanted side-scrolling. This problem only occurs on mobile browsers.
Visual Evidence:
Proposed Solution:
PageFly-Victor provided CSS code to fix the horizontal scrolling:
theme.liquid file before the </head> tagoverflow-x: hidden and constrains width to 100% for mobile screens (max-width: 767px)Current Status:
The discussion remains open with one follow-up question seeking code confirmation. The user mentioned using a non-original theme due to budget constraints at store launch.
according to this print above, would it be possible to tell me how I can make it not possible to drag the screen to the side? this only happens on mobile. (the problem appears only in mobile browser!)
A person who was helping me with the matter said that the problem is in this section of the theme.
I will be happy to receive help and grant whatever is needed as the theme is not original and I cannot pay now at the beginning of the store.
This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.
Regarding your concern about keep your mobile screen fixed. Please help me to add the code into your theme and that will fix the problem, and before making any changes please help me to duplicate your theme first. Now you can follow my steps below
Step1: Online stores > Themes > Edit code > search for theme.liquid
Step2: Press Ctrl + F or Cmd + F to search the keyword :
Step3 : paste the code below:
@media screen and (max-width: 767px){
html, body {
overflow-x: hidden! Important;
max-width: 100% !important ;
width: 100% !important;
}
}
If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.
Best regards,
PageFly
Are you sure from code please
