Horizontal scroll on product page - mobile version

[muzzamazza]

Hi there, 

I have the horizontal scroll issue on my product pages on mobile screens, the media container seems to be wider than the viewport.

I tried to use the common 'overflow: hidden' option but that messes up the sticky product information on desktop version. 

Could someone check which parent needs editing to fix this width issue?

Any help would be greatly appreciated, will buy you a coffee 🙏

https://muzzamazza.com/products/domino-blue
pass: tiampa

[parth_ghelani · Accepted solution]

Hello @muzzamazza 

If you are still facing the same issue even after applying below solutions, please try by following this steps:

1. Go to admin > online store > edit code.

2. In code directory, find the file named "section-main-product.css" and open it.

3. Copy below given code and paste it at the end of the file that mentioned above.

@media (max-width: 749px){
   .product__media-wrapper slider-component{
     width: 100%;
     margin: 0 !important;
   }
   .product__media-wrapper .product__media-item {
     margin-left: 0 !important;
   }
}

4. Don't forget to save the file after making changes.

Hope this solution works best for your issue than other solutions.

[Rahul_dhiman]

Hello @muzzamazza 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-main-product.css
add this code at the end of the file.

@media screen and (min-width: 750px) {
.product-media-container {
padding: 10px !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[muzzamazza]

Thanks for your reply Rahul, however I don't think you understood my question. 

The problem I have is on mobile screens, the entire page can scroll left and right (overflow-x) slightly. 

I want to find the container/parent where the overflow is the problem and fix that width.

I tried to add

<style>
.grid__item {
overflow-x: hidden;
} 

in theme.liquid but that stops the product information being sticky on desktop as i scroll and I very much need that to work. 

[steve_michael2]

Hi @muzzamazza , I hope you are doing well. 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </body>

<stlye>
@media screen and (min-width: 750px) {
       .product-media-container {
           padding: 10px !important;
       }
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[muzzamazza]

Hi Steve, 

I don't need spacing between the images on desktop, I need to get rid of the overflow-x when viewing my product on mobile. 

Adding the  below in the theme liquid worked but then created the problem on desktop where the sticky product information stopped being sticky. So I need another solution that fixes the main media container/parent with the problematic overflow.

<style>
.grid__item {
overflow-x: hidden;
} 

[steve_michael2]

@muzzamazza , can you try the below code:

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

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[muzzamazza]

Nope, doesn't work unfortunately 

[steve_michael2]

@muzzamazza , I see, try the below code:

@media (max-width: 749px) {
  .product-media-container {
    overflow-x: hidden; /* This will prevent Prevent horizontal scroll */
    max-width: 100%; /* This will check and Ensure container does not exceed viewport width */
  }

  .grid__item {
    overflow-x: hidden; /* This will prevent horizontal scroll on grid items */
    max-width: 100%; /* This will check and ensure grid items fit within the container */
  }
}

@media (min-width: 750px) {
  .sticky-product-info {
    position: sticky;
    top: 0; /* Adjust as needed */
  }
}

[muzzamazza]

Ok this is working pretty well, it would be even better if the images actually fit inside the container as they are currently being cropped on the right side (you can see by sliding through to the next image that it's actually wider than the screen)

Thanks for al your help on this so far

[steve_michael2]

@muzzamazza , try the below code:

.product__media-wrapper slider-component .product__media-list {
  scroll-padding-left: 0 !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[parth_ghelani · Accepted solution]

Hello @muzzamazza 

If you are still facing the same issue even after applying below solutions, please try by following this steps:

1. Go to admin > online store > edit code.

2. In code directory, find the file named "section-main-product.css" and open it.

3. Copy below given code and paste it at the end of the file that mentioned above.

@media (max-width: 749px){
   .product__media-wrapper slider-component{
     width: 100%;
     margin: 0 !important;
   }
   .product__media-wrapper .product__media-item {
     margin-left: 0 !important;
   }
}

4. Don't forget to save the file after making changes.

Hope this solution works best for your issue than other solutions.

[muzzamazza]

Hya Parth,

ah this is working pretty well, there's just one issue -> scrolling through the images there's a slight overlap on the left after each one slides in.

[parth_ghelani · Accepted solution]

You need to add below css rule with the css which you paste previously that i've mention.

in the media rule @media (max-width: 749px), add this rule:

.product__media-wrapper slider-component .product__media-list {
  scroll-padding-left: 0 !important;
}

By this your issue will be fixed.

[muzzamazza]

LEGEND!

Thank you 🙏