This one was it, I just added margin-top: -55px; to it as well so it moves up, thank you so much for the help!
Topic summary
Main issue: Remove extra padding around the product image (primarily on mobile) so the image sits flush with the screen edges.
Key steps and proposals:
- Store URLs shared to diagnose the layout.
- Initial CSS (max-width: 749px) reduced margins and padding on the product gallery/content, which helped but didn’t make the image fully edge-to-edge.
- Second CSS (max-width: 480px) set .product .container to width: 100% and padding: 0; adding margin-top: -25px initially caused text to sit too close to edges.
- Alternative CSS targeted .gallery-wrap to span full viewport width (100vw) with negative left margin and centering adjustments.
- Final accepted fix: On mobile, set .product .container { width: 100%; padding: 0; } and the OP added margin-top: -55px to shift content upwards. This achieved the flush look without disrupting other text.
Outcome: Original request resolved for the submitter.
Latest update (2024): A new participant using the Dawn theme reports the above no longer works and asks for an up-to-date mobile solution. No confirmed answer yet; discussion remains open.
Notes: Screenshots were shared; CSS edits were made in assets/styles.scss.liquid.