Removing gap/space between images in product description

[thekidreyz]

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

[PageFly-Noah]

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

[thekidreyz]

It is euiseok0201

Thanks ahead!

[PageFly-Noah · Accepted solution]

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

<style>
 .product__description p img{
    margin-bottom: -15px !important;
 }
</style>

Thank you ! 

[thekidreyz]

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

[PageFly-Noah]

Thank you, have a nice day !

[thekidreyz]

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

 

[PageFly-Noah]

Hi @thekidreyz  Yes sure, Please add code here:

<style>
 .product__description p img{
    margin-bottom: -15px !important;
 }
 .product__description:has(img){
    margin-left: -15px !important;
 margin-right: -15px !important;
 }
</style>

Thank you !

[niraj_patel]

hello @thekidreyz 

Password?

[thekidreyz]

It is euiseok0201

Thanks ahead:)

[Vinsinfo]

@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;
}

Result will be like,

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

[BSSCommerce-B2B]

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.

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

@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.