Reduce space between two pictures in product description

Store Design
,

Topic summary

A user seeks to reduce spacing/padding between images in their product description on the Sense theme. They provide a screenshot showing excessive vertical space between two product images.

Proposed Solution:
Another user offers a CSS-based fix that partially resolves the issue:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add the following CSS code at the bottom:
#productInfo-template--[ID] > div.product__description.rte.quick-add-hidden > main > p > img {
  margin-bottom: 0px !important;
}

Current Status:
The CSS solution removes some spacing but not all of it. Additional code may be needed to fully eliminate the remaining gap between images. The discussion remains open as a complete solution has not yet been achieved.

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

how to reduce space/padding between two pictures in product description on sense theme

Screenshot 2023-10-07 020648.png
Screenshot 2023-10-07 020648.png291Ă—246 36.3 KB

1 Like
2

Hi @ROEDADKHAN

Would you mind to share your Store URL website? with password if its protected. Thanks!

1 Like
3

Would have to be done using CSS. Use inspect element to find the class of the images first.

1 Like
4

Here’s The Link: Portable Razor Set – TooLit (kleen.store)
<>

1 Like
5

Thanks for the info I manage to take out some space but noy fully. The other remainning space need another code.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#ProductInfo-template--21198587461918__main > div.product__description.rte.quick-add-hidden > p > img {
    margin-bottom: 0px !important;
}