Reduce Line Height in Product Description - Dawn Theme

[JustLitWicks]

Hello, 

I would like to reduce the line spacing in product description to single line spacing - default seems to be double spaced. Website isn't published but here is sample text.

How it is now:

Note Description

Top:

Middle:

Bottom:

How I would like it:

Note Description

Top:

Middle:

Bottom:

[GemPages]

Hello @JustLitWicks ,

It's GemPages support team and glad to support you today.

I would like to give you a recommendation to support you so kindly follow steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
.product__description.rte {
    line-height: 20px !important;
}
</style>

Let us know how it works for you.

Best regards,
GemPages Support Team

[debbieps]

Hello GemPages,

Thank you for sharing the code.

My Product Description has 2 different languages (Arabic and English).

This code serves for my English Description well, and I'd like to also have my Arabic Description Line Height Reduced to 18px. Will it be possible?

I attached a screenshot for your review.

[PageFly-Richard]

Hi @JustLitWicks ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

.product__description.rte {
    line-height: 1.3 !important;
}

NOTE: You can change value "1.3" to fit your website

I hope it would help you
Best regards,

Richard | PageFly

[JustLitWicks]

Hi there @PageFly-Richard 

Thank you for your response. I was able to add the code where you mentioned. It does change the line spacing significantly for sentences that naturally go to the next line but only slightly changed the spacing for a new paragraph. I attached two photos. The BEFORE is before I added your code, the AFTER is, well, after. 

Is there a way to reduce the spacing in the new paragraphs? (the space between lines "Top:" and "Middle"? Thank you!

[PageFly-Richard · Accepted solution]

Hi @JustLitWicks ,

You can try replace previous my code by below code:

.product__description.rte {
    line-height: 1.3 !important;
}
.product__description.rte p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.product__description.rte p + p {
    margin-top: 10px !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[Caidra]

Thanks a lot for this. Is there also a way to try to justify the text . currently the right side looks so jagged.