Remove padding on product images shopify DAWN theme

Technical Q&A

Topic summary

A Shopify store owner using the Dawn theme needed to remove unwanted padding around product images on mobile devices. The images weren’t displaying full-width as desired, with visible white space on the sides.

Solution provided:

  • Custom CSS code added to the theme.liquid file (before the </body> tag)
  • Targets the .product__media-wrapper class to eliminate padding on mobile screens (max-width: 749px)

Follow-up issue:
The same padding problem appeared on related product collection images at the bottom of product pages.

Additional fix:

  • Extended CSS code to target product-recommendations.related-products
  • Removes padding while maintaining proper spacing for the heading element
  • Complete code snippet provided for both issues combined

Status: Resolved. The user confirmed the initial solution worked after struggling for hours to find a fix elsewhere. Screenshots demonstrate the before/after results showing full-width images without padding.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

This is what I mean:

SureBuy_0-1737721607929.png
SureBuy_0-1737721607929.png483×844 51.9 KB

This is what I got:

SureBuy_1-1737721633732.png
SureBuy_1-1737721633732.png502×856 166 KB

https://posterhaven.net/products/the-stout-misty-train-station-lonesome-poster-wall-art-large-wall-art-canvas-and-print-prints-shop-art-on-wall-home-decor-abstract-artwork

It’s on shopify dawn theme and I can’t seem to get rid of that padding or make the images full witdh :disappointed_face:

1 Like
2

Hi @SureBuy

TRy this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Awesome! I have been trying for hours couldn’t find it anywhere else.

Also…

The same issue is also on the collection images on the product pages:

SureBuy_0-1737723983216.png
SureBuy_0-1737723983216.png483×493 101 KB

Any way to apply it there to?

4

Add this code.

before the 

@media only screen and (max-width: 749px){
product-recommendations.related-products {
    padding-left: 0;
    padding-right: 0;
}

h2.related-products__heading.inline-richtext.h1 {
    padding-left: 1.5rem;
}
}

And save. Or replace all the code below.

and Save.

Result:

Made4uoRibe_0-1737736253339.png
Made4uoRibe_0-1737736253339.png427×657 88 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!