Solved

How To Remove Spacing Between Images In Product Description(In Custom Liquid Section)

ERCC
Tourist
4 0 1

Hi, 

I add a custom liquid section in product page for displaying the product description below the Product information section.However, there are white spaces or margins between image in description(rich text).

 

image.png

image.png

 

My product page url: Product page preview 

Using Dawn 12.0.0 theme and the custom liquid code below:

<div class="page-width">
<div class="rte">
<h2>Product Detail</h2>
{{product.description}}
</div>
</div>

 

How can I remove the spaces or margins ?

I have searched and tried some method in other topic in community,but it did not work.

Thanks 🙏

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

This is an accepted solution.

Please update your code to this 

<div class="page-width">
<style>
.rte img {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    box-shadow: unset !important;
    border: unset !important;
}
</style>
<div class="rte">
<h2>Product Detail</h2>
{{product.description}}
</div>
</div>

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 5 (5)

PageFly-Henry
Astronaut
986 283 230

Hi @ERCC 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media (max-width: 767px){

.t4s-product__description.t4s-rte p:last-child {

    line-height: 0 !important;

}

.t4s-product__description.t4s-rte p:last-child img {

    margin-bottom: 0 !important;

    border: 0 !important;

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ERCC
Tourist
4 0 1

Thank you for the help

PageFly-Henry
Astronaut
986 283 230

You are welcome 😊 @ERCC 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

This is an accepted solution.

Please update your code to this 

<div class="page-width">
<style>
.rte img {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    box-shadow: unset !important;
    border: unset !important;
}
</style>
<div class="rte">
<h2>Product Detail</h2>
{{product.description}}
</div>
</div>

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

ERCC
Tourist
4 0 1

It work!

Thanks again❤️