Reduce Line Height in Product Description - Dawn Theme

Solved

Reduce Line Height in Product Description - Dawn Theme

JustLitWicks
Tourist
5 0 1

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:

 

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4661 1068 1725

This is an 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

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


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


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

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5625 1261 1243

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

GemPages_0-1678008323364.png


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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
debbieps
Tourist
8 0 1

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.

 

Arabic Line Height to Reduce.png

PageFly-Richard
Shopify Partner
4661 1068 1725

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

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


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


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

JustLitWicks
Tourist
5 0 1

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!Screenshot 2023-03-06 at 8.07.46 PM.png

 

Screenshot 2023-03-06 at 8.07.00 PM.png

 

PageFly-Richard
Shopify Partner
4661 1068 1725

This is an 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

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


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


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

Caidra
Excursionist
40 1 10

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

Caidra_0-1680748522204.png