Thank you this worked , and i removed “first-of-type” since it was only working for the first image but now it works for all. Appreciate your help Vinh. Thank you
Topic summary
Issue: On product pages (Dawn theme), image gallery displays correctly at first but, after scrolling to the bottom and back up, the layout changes, breaking the smooth scrolling/gallery view. Screenshots were provided to illustrate the shift.
Diagnosis: The problem stems from CSS rules in assets/base.css affecting grid item widths and spacing across breakpoints.
Fixes applied:
- Desktop (≥750px): Commented out the width calculation for .grid–2-col-tablet .grid__item within the @media (min-width: 750px) block.
- Mobile (≤749px): Disabled margin-left: 1.5rem on .grid–peek.slider .grid__item and added width: 100%. The selector was adjusted by removing :first-of-type so the rule applies to all images, not just the first.
Outcome: The layout now remains consistent on both desktop and mobile, preserving smooth scrolling and the intended image display.
Status: Resolved. No further action requested.