Removing gap/space between images in product description

Store Design
, , , , , , ,

Topic summary

A user is trying to remove gaps between images in their Shopify product descriptions, particularly on mobile view. The issue affects their product page layout at critterlamp.com.

Solutions Provided:

  • CSS modification approach: Multiple contributors suggested adding CSS code to the base.css file targeting .product__description img elements with properties like margin: 0, display: block, and line-height: 0

  • Alternative method: One suggestion involved adding code to theme.liquid file above the </body> tag

  • Mobile-specific fix: A media query solution was provided specifically for screens with max-width 750px, addressing both image margins and paragraph spacing

Outcome:

The user confirmed one solution worked perfectly. They then requested additional help to remove side margins on mobile view, and assistance was offered to continue troubleshooting.

The discussion includes code snippets, screenshots demonstrating the issue, and step-by-step instructions for accessing Shopify’s theme editor.

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

Last couples days I’ve been trying so hard to find how to remove gap/space between product description images on product page but none of them worked. I will be glad if anyone help me out here

URL: https://critterlamp.com/products/dodo-duck-night-light

Screenshot_20240506_001121_Samsung Internet.jpg
Screenshot_20240506_001121_Samsung Internet.jpg1080×2065 149 KB

2

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide password in your url website. Thank you.

Best regards,

Noah | PageFly

3

hello @thekidreyz

Password?

4

It is euiseok0201

Thanks ahead!

5

It is euiseok0201

Thanks ahead:)

6

@thekidreyz Please follow below steps to remove space/gap between images in product description. Let me know whether it is helpful for you.

  1. From admin go to “Online stores” → “Themes”
  2. Click action button from the current theme and select “Edit code”.
  3. Search for “base.css” file and paste the below code at the bottom of the file.
.product__description img {
    display: block !important;
    margin: 0px !important;
}

Vinsinfo_1-1714976833126.png
Vinsinfo_1-1714976833126.png1892×846 117 KB

Result will be like,

Vinsinfo_0-1714976828560.png
Vinsinfo_0-1714976828560.png532×895 405 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

7

Hi @thekidreyz please add code here in file theme.liquid and above tag :

Screen Shot 2024-05-06 at 13.41.41.png
Screen Shot 2024-05-06 at 13.41.41.png952×1784 199 KB

Thank you !

8

Hi @thekidreyz

Hope the following instructions can help you:

  • Based on the images you provided, it seems like you want these adjustments on mobile. Here are the instructions for you to achieve that.

Step 1. Go to Themes → Edit Code.

1.png
1.png2000×976 227 KB

Step 2. "Find the file base.css . Add the following CSS snippet to the end of the file:”

Untitled.png
Untitled.png2000×666 177 KB

@media screen and (max-width: 750px) {
    .product__description p:last-child {
        line-height: 0 !important;
        margin: 0 -1.5rem !important;
        margin-top: -2px;
    }
    .product__description p:last-child img {
        margin: 0;
    }
}

Here is the result: https://www.loom.com/share/0a9bf54b77264a6298562ddb4dbb44e6

We hope it will work for you. Please vote it as a solution if you find it helpful.

9

Thank you so much! It worked perfectly :)))

1 Like
10

Thank you, have a nice day !

11

If you don’t mind can you help with removing side margin for mobile view too?

Screenshot_20240507_103546_Samsung Internet.jpg
Screenshot_20240507_103546_Samsung Internet.jpg1080×2065 89.3 KB

12

Hi @thekidreyz Yes sure, Please add code here:

Thank you !