Make spaces between text smaller product description

Store Design
, ,

Topic summary

A user seeks to reduce line spacing in product descriptions and blog posts on their Shopify store using the Halo Theme. Multiple solutions were provided involving custom CSS code.

Main approaches suggested:

  • Adjusting line-height and margin-top properties for paragraphs and list items
  • Targeting specific classes like .halo-text-format, .toggle-content.popup-mobile, and .tabs-contents
  • Adding CSS to base.css or component-rte.css files via Theme Editor

Implementation locations:

  • Online Store → Theme → Edit code → Assets → base.css (most common)
  • Some responses suggest component-rte.css or theme.liquid

Key CSS patterns:

li { line-height: 10px !important; }
p { margin-top: 0 !important; }

The discussion shows iterative troubleshooting, with the original poster testing solutions and reporting that initial code only partially worked. Contributors from PageFly, GemPages, and other developers offered increasingly specific CSS targeting different elements (headers, paragraphs, lists) to comprehensively reduce spacing throughout product pages and blog content.

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

Hey!

Im looking for a solution to make the text spaces smaller between lines in the product description and also on the blogs.

https://ledverlichting24.nl/products/led-paneel-60x60-3000k-ugr19-professioneel-knippervrij

This is the productpage and im using the theme: Halo Theme.

Thanks in advance!

2

@Led24
Hello,

li {
	line-height: 10px !important;
}
p {
	margin-top: 0 !important;
}

Add this CSS at the bottom of Online Store-> Theme->Edit code->Assets->base.scss.liquid

Like This

oscprofessional_0-1670491893632.png
oscprofessional_0-1670491893632.png1274×689 59.8 KB

3

Hey! I added this code but it only applied to one piece of text, check page now how it looks.

4

Still space between the header and paragraph text is too big, u understand?

5

@Led24

.halo-text-format p+h1, .halo-text-format p+h2, .halo-text-format p+h3, .halo-text-format p+h4, .halo-text-format p+h5, .halo-text-format p+h6 {
    margin-top: 10px !important;
}

apply above css also

6

Hi @Led24 ,

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

  • Go to Online Store->Theme->Edit code
  • Asset-> component-rte.css
  • Paste the below code at the bottom of the file

#tab-product-informatie *{

margin-top:0 !important;

margin-bottom:0 !important;

}

PageFlyVictor_0-1670492735641.png
PageFlyVictor_0-1670492735641.png1161×526 38.4 KB

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

7

@Led24
Hello,

.toggle-content.popup-mobile p {
	margin-top: 0 !important;
}
.toggle-content.popup-mobile h3 {
	margin: 0;
}
.toggle-content.popup-mobile ul {
	padding: 0;
}

Add this CSS at the bottom of Online Store-> Theme->Edit code->Assets->base.scss.liquid

Do You Like This

oscprofessional_0-1670492551060.png
oscprofessional_0-1670492551060.png1275×776 77.9 KB

8

ello @Renaye

You can follow these steps:

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

GemPages_0-1670492845328.png
GemPages_0-1670492845328.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1670492878745.png
GemPages_1-1670492878745.png989×841 32.8 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

9

Hello @Led24

Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

.tabs-contents.halo-text-format p { line-height: 1.2; }
.tabs-contents.halo-text-format ul li+li, .tabs-contents.halo-text-format ol li+li { margin-top: 0px !important; }
.tabs-contents.halo-text-format p+p { margin-top: 10px !important; }
.tabs-contents.halo-text-format p+ul, .tabs-contents.halo-text-format p+ol { margin-top: 10px !important; margin-bottom: 10px !important; padding-bottom: 0px !important; }
.article-body { line-height: 1.2 !important; }