Mobile product pages showed a slight horizontal scroll on small screens because the media container exceeded the viewport. Applying overflow-x: hidden to .grid__item fixed mobile but broke the sticky product info on desktop, so a targeted mobile-only solution was needed.
Early CSS tweaks (desktop padding, hiding overflow on .product-media-container) didn’t resolve the mobile overflow. A more effective approach in section-main-product.css under @media (max-width: 749px) set the slider to fit the viewport: .product__media-wrapper slider-component { width: 100%; margin: 0 } and .product__media-wrapper .product__media-item { margin-left: 0 }.
Remaining issues included a slight left overlap and images cropping on the right during swipe. Adding .product__media-wrapper slider-component .product__media-list { scroll-padding-left: 0 !important; } removed the overlap/cropping and eliminated horizontal scroll, while preserving desktop sticky behavior.
Outcome: Issue resolved with mobile-specific CSS changes; no further action requested. Screenshots were used to illustrate overflow and overlap during the discussion.
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