It works, I need to remove these spaces too and when I try to scroll the product name gets hided
Topic summary
Goal: Align product images to the far left edge and directly beneath breadcrumbs on a Shopify product page.
Initial fixes (CSS):
- Remove container padding and top spacing on desktop: set product-info .page-width padding: 0, product-info padding-top: 0, and adjust .product__info-wrapper padding-top.
- Alternative via Theme settings: on ≥750px, set .product__column-sticky top: 10rem and remove gaps in .product__media-list (column-gap/row-gap: 0).
New issues reported:
- Remaining unwanted spacing around the media/grid.
- Product name gets hidden when scrolling (related to sticky behavior).
Latest update (CSS refinement):
- On ≥750px, reduce sticky offset to top: 7rem for .product__column-sticky to prevent title overlap while scrolling (sticky = element remains fixed within viewport as you scroll).
- Zero out grid spacing by setting .grid column-gap: 0 and row-gap: 0.
Artifacts:
- Multiple screenshots are central for visual spacing and overlap verification.
Status: Changes appear to help, but final confirmation from the requester is not yet provided; resolution pending.
