Make Mobile Product Image Full Width Of Screen Dawn theme

Store Design
, ,

Topic summary

A user wants to remove padding around product images on mobile view in Shopify’s Dawn theme to make them full-width, providing before/after screenshots to illustrate the desired outcome.

Initial Solutions Provided:

  • Multiple CSS code snippets were shared targeting .page-width, .product-media-container, and header elements
  • Solutions involved adding custom CSS to base.css or using Theme Settings > Custom CSS
  • Code typically used @media queries for screens under 749-767px width

Key Implementation:
One solution successfully removed padding by targeting:

  • .grid--peek.slider left margin
  • .slider__slide top margin
  • section#MainProduct right padding

This was confirmed working by one user with visual proof.

Ongoing Issues:

  • The successful code caused unintended side effects: affected entire page width and created unwanted lines above images
  • Several users report that previously working solutions no longer function on their Dawn theme stores
  • Multiple requests for help remain unanswered, suggesting the solutions may be store-specific or Dawn version-dependent

Status: Discussion remains active with unresolved cases. Users continue seeking working CSS solutions, with some offering payment for assistance.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
18

Hi again,

I wanted to thank you personally again for helping me out with the custom code to make the product image full width, which it, did but it also unfortunately, I just now noticed, affects the enitre page widh for some reason even though the page itself is not targeted.

It was happedend right after I implemented the code gave me. I already tried to change up @media screen to @media only screen, which did nothing I’m sad to say, I’m sure it’s a very tiny tweek, but I as a non-coding expert wouldn’t know :sweat_smile:

Anyways I was just hoping you could help me out one last time, but I completely understand if not and hopefully this will be the last time I will have to bother you again haha - Almost forgot to add but there is this weird line above the image, it should not appear, I’ll go check out if it has something to do with the upper section, but you can’t tell me right off the bat what is causing it right?

  • I have also send you a private message actually displaying the issue.

Kind regards Dorian van der Spoelcordacc