Make product page image full size

Store Design
, , ,

Topic summary

A user seeks to modify the Shopify Dawn theme’s product page on mobile devices to make product images display at full height and width, eliminating extra spacing around the first image.

Reference provided:

  • Live site URL with password access
  • Two comparison images showing current state vs. desired full-coverage layout

Solution offered:
A CSS code snippet targeting mobile screens (max-width: 749px) that removes margin from the first grid item in the product image slider.

Implementation options:

  1. Add via Theme Customizer → Theme Settings → Custom CSS
  2. Directly edit base.css file in the theme’s assets folder

The proposed fix uses margin: 0px!important to eliminate spacing, though no confirmation yet on whether this fully resolves the issue or if additional adjustments are needed.

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

Hello, i need to make shopify dawn theme product page fix, need to make the product image on mobile devices full height width same as 2 reference image, also need to make it perfect , need to remove the extra space space from first image and make it cover full area same as second image :

Site: https://s1wpe5-nr.myshopify.com/products/mens-jacket-leather-coated
Pass: 1

Soul07_0-1741414578063.png
Soul07_0-1741414578063.png378×768 155 KB

Soul07_1-1741414724998.png
Soul07_1-1741414724998.png382×605 124 KB

2

@Soul07

@media screen and (max-width: 749px) {
  .grid--peek.slider .grid__item:first-of-type {
     margin: 0px!important;  
}
    }

How to Add This to Shopify Dawn Theme:

  1. Go to Shopify Admin → Online Store → Themes.
  2. Click “Customize” on your Dawn theme.
  3. In the theme editor, go to “Theme settings” (bottom left).
  4. Scroll down and click “Custom CSS”.
  5. Paste the above CSS code and save changes.

Alternative (Edit Theme CSS Directly):

  1. Go to “Online Store” → “Themes”.
  2. Click “Actions” → “Edit code”.
  3. Open base.css inside the assets folder.
  4. Paste the CSS at the bottom and Save.