How to remove spacing between images in product description

Technical Q&A
,

Topic summary

Goal: Remove spacing between product images in the product description (Shopify Dawn) and auto‑resize images on mobile.

Proposed solutions:

  • General CSS approach: Set margin/padding to 0 where image spacing is defined. For mobile, add a media query (CSS rule that targets specific screen sizes): @media (max-width: 600px) { img { width: 100%; } }.
  • Dawn‑specific CSS: In Assets > base.css, add:
    .product .color-background-1 .page-width > div { display: grid; gap: 0; justify-content: center; }
    A screenshot was provided showing zero gap between images after this change.
  • theme.liquid edit: Another reply advised adding code above , but the actual code snippet was missing in the post text and appears only in an image (attachment central to replication).

Current status:

  • No confirmation from the original poster that the issue is resolved.
  • A later participant reported the Dawn‑specific fix did not work for their store and asked if adjustments are needed.

Outcome: Unresolved/ongoing. Next steps likely involve verifying the exact DOM/selector for the store and ensuring the CSS loads after other theme styles.

Summarized with AI on December 17. AI used: gpt-5.
3

Hi @hobbyzoneuk you can solve the space between images in your product description by adding CSS code below at the bottom of base.css in your store admin > Sale channels > Online store > Themes > Edit code > Assets > base.css

.product .color-background-1 .page-width > div {
display: grid;
gap: 0;
justify-content: center;
}

This is the result

Screenshot 2023-04-26 at 09.22.05.png
Screenshot 2023-04-26 at 09.22.05.png1012×996 192 KB