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 n…

Hello @muzzamazza If you are still facing the same issue even after applying below solutions, please try by following this steps: Go to admin > online store > edit code. In code directory, find the file named “section-main-product.css” and open it. Copy below given code and paste it at the…

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] I…

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 widt…

Hi @muzzamazza , I hope you are doing well. Go to Online Store → Theme → Edit code. Open your theme.liquid file In theme.liquid, paste the below code before If my reply is helpful, kindly click **like** and mark it as an **accepted solution.** Thanks!

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 solu…

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

Nope, doesn’t work unfortunately

@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 { overflo…

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

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.

Horizontal scroll on product page - mobile version

Store Design

muzzamazza August 23, 2024, 11:33am 10

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.

Topic		Replies	Views
Horizonal Scroll Showing On Mobile View - Dawn V7 Theme Store Design menu , design , customizations , shopify-themes , troubleshooting	6	108	February 13, 2023
PRODUCT IMAGE MOVES VERTICAL FIX Technical Q&A optimization , javascript , liquid , css , html , shopify-theme	3	64	November 28, 2024
How can I prevent horizontal scrolling on the Dawn theme for mobile? Store Design css	5	106	December 8, 2023
Horizontal scrollbar on mobile products page Technical Q&A liquid , css , third-party-theme , html , shopify-theme	2	139	December 10, 2024
How can I eliminate a persistent horizontal scroll bar on my mobile product page? Store Design product-page	3	104	March 26, 2024

Horizontal scroll on product page - mobile version

Related topics