Re: Horizontal scroll on product page - mobile version

Solved

Horizontal scroll on product page - mobile version

muzzamazza
Excursionist
16 1 0

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

 

horizontal scroll.JPG

Accepted Solutions (2)

parth_ghelani
Shopify Partner
259 38 35

This is an 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.

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns

View solution in original post

parth_ghelani
Shopify Partner
259 38 35

This is an 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.

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns

View solution in original post

Replies 13 (13)

Rahul_dhiman
Shopify Partner
617 120 124

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
15.png

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
muzzamazza
Excursionist
16 1 0

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. 

 

horizontal scroll.JPG

 

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
Explorer
133 17 20

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!

Crafting exceptional online experiences with innovative design and technology.
muzzamazza
Excursionist
16 1 0

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;

 

horizontal scroll.JPG

steve_michael2
Explorer
133 17 20

@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!

Crafting exceptional online experiences with innovative design and technology.
muzzamazza
Excursionist
16 1 0

Nope, doesn't work unfortunately 

steve_michael2
Explorer
133 17 20

@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 */
  }
}
Crafting exceptional online experiences with innovative design and technology.
muzzamazza
Excursionist
16 1 0

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
Explorer
133 17 20

@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!

Crafting exceptional online experiences with innovative design and technology.

parth_ghelani
Shopify Partner
259 38 35

This is an 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.

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
muzzamazza
Excursionist
16 1 0

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.

 

product page scroll overlap.JPG

parth_ghelani
Shopify Partner
259 38 35

This is an 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.

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
muzzamazza
Excursionist
16 1 0

LEGEND!

 

Thank you 🙏