Decrease the spacing between product description pictures

Technical Q&A

Topic summary

Goal: Remove excessive spacing between two product description images on a Shopify product page.

  • The requester shared the product link and noted both images are 2048Ă—2048.
  • First suggestion: add CSS to adjust margins for “.container .sf__accordion-content” (0.5em top/bottom) in theme.css; it didn’t resolve the spacing.
  • Follow-up guidance: ensure the file was saved and try theme.css.liquid if present.
  • Final solution: add CSS targeting “.pb-8.prose img” to set margin-top and margin-bottom to 0 with !important, placed at the bottom of theme.css via Online Store > Themes > Actions > Edit code.

Outcome: The spacing issue was fixed; the requester confirmed success and thanked the helpers.

Notes:

  • CSS (Cascading Style Sheets) controls presentation; margins define the space around elements. “!important” forces the rule to override other styles.
  • A screenshot was shared to show where code was added, but the working fix was the updated selector and zero margins.

Status: Resolved; no open questions.

Summarized with AI on February 14. AI used: gpt-5.
1

NaughtyBunny_Ad_0-1655868286950.png
NaughtyBunny_Ad_0-1655868286950.png1265Ă—264 162 KB

I wanna get rid of the spacing between the two description pictures. The image size was set to 2048x2048.

Please help!

2

Hi @NaughtyBunny_Ad ,

Send your page link please

3

https://mattywangxiao1029.myshopify.com/products/omysky-smile-nu-vibrt

Thanks a lot!

4

Hi @NaughtyBunny_Ad ,

Please add this CSS code below at the bottom of theme.css file

.container .sf__accordion-content {
margin-bottom: 0.5em !important;
margin-top: 0.5em !important;
}
5

Hi DanBim,

I tried to add this CSS code at the bottom of the theme.css file under the assets folder. The problem remains. Can you please give me more info on this issue?

6

Please see the screenshot for the code. Thanks.

NaughtyBunny_Ad_0-1655912069767.png
NaughtyBunny_Ad_0-1655912069767.png854Ă—306 13.1 KB

7

Hi @NaughtyBunny_Ad , did you click Save button after adding code?

Or please check is there a theme.css.liquid file then please add code at the bottom, click Save button, reload your product page for checking

8

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.pb-8.prose img {
margin-top: 0!important;
margin-bottom: 0!important;
}
1 Like
9

Thank you so much! You saved me!

10

Thanks, DanBim!