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.
4

Add This Code In Edit Code > Base.css File

@media screen and (max-width:767px) {
    .header__heading-logo{
        width: 100%;
    }
    .header__heading-link{
        padding: 0 !important;
    }
}