Dawn Theme Mobile Product Image Full Width

Retired Boards Appdev Store Design

Topic summary

A user wants to modify the Dawn theme’s mobile product image to display at full width with zero padding on top, left, and right sides. They’ve managed to adjust the top padding but are struggling with the horizontal padding since the image sits within a full-page div.

Their current approach:

  • Modified the main-product.liquid section
  • Added custom CSS for padding, margin, and overflow properties
  • Applied padding-top: 0px and margin-top: -10px

Suggested solution:

  • Navigate to Online Store > Themes > Actions > Edit code
  • Open theme.scss.liquid in the Layout folder
  • Add a media query targeting screens up to 749px wide:
@media screen and (max-width: 749px) {
  .product-single__photo {
    width: 100%;
  }
}

This CSS targets mobile devices and applies full-width styling to all product pages. The max-width value in the media query can be adjusted to control when the change takes effect.

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

I’d like to make the product image full width and with 0 padding to the top. I think I have figured out the padding to the top, however, the image is in the whole div of the full page, so I am not sure how to make it 100% width with 0 padding left and right.

Screenshot 2022-10-21 at 18.05.56.png
Screenshot 2022-10-21 at 18.05.56.png402×513 63.9 KB

I would prefer not to share the URL of the page because of privacy reasons, however, it’s a simple default dawn theme without anything custom except for this:

In the main-product.liquid section I added the padding, margin and overflow.

.section-{{ section.id }}-padding {
      padding-top: 0px;
      margin-top: -10px;
      overflow: hidden;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }
2

Hello There

To make a mobile product image full width on the Shopify Dawn theme, you can follow these steps:

  1. Go to your Shopify store’s admin panel and click on “Online Store” in the left-hand menu.
  2. Click on “Themes” and then click on the “Actions” button for the Dawn theme.
  3. In the “Actions” dropdown, select “Edit code.”
  4. In the “Layout” folder, click on “theme.scss.liquid” to open it in the editor.
  5. Scroll down to the bottom of the file and add the following code:
@media screen and (max-width: 749px) {
  .product-single__photo {
    width: 100%;
  }
}
  1. Save your changes by clicking the “Save” button at the top of the page.

This code will apply to all product pages on your store, and will make the product image full width on mobile devices with screen widths up to 749 pixels. If you want to adjust the screen width at which this change is applied, you can adjust the value in the max-width media query.

hope this helps!