Changing line spacing in a text element – Themeco Community

Changing line spacing in a text element

amparanjape — Wed, 29 Jul 2015 09:09:33 +0000

Hi,

I have a Text element inserted on my front page. I can change the font size and fonts but cannot reduce the line spacing. I can increase it (either by using % or higher px values) but cannot go to (say) half spacing. Can I do this?

Thx
anil

Reply To: Changing line spacing in a text element

Paul R — Wed, 29 Jul 2015 09:23:42 +0000

Hi Anil,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.


body .x-text {
   line-height:1.5;
}

If that doesn’t help, please provide us your site url so we could take a closer look.

Thanks

Reply To: Changing line spacing in a text element

amparanjape — Wed, 29 Jul 2015 11:24:24 +0000

Thanks. That works but now it’s applied globally to all text elements. If I want to change the line height only in specific text elements, what should I do? I tried adding a ‘line-height:1’ attribute in the style of the code for that text element. I found that I can increase the line height beyond the global default put in the customer CSS as above but not reduce it. Is there a way?

Thx
anil

Reply To: Changing line spacing in a text element

Thai — Wed, 29 Jul 2015 11:31:17 +0000

Hi There,

Would you mind providing us with your website URL & the section you want to increase the line height?

Many thanks.

Reply To: Changing line spacing in a text element

amparanjape — Wed, 29 Jul 2015 11:51:07 +0000

aagamilighting.com/wp

The section is the Intro section in top page (right under the menu when the site first loads) which has the following text:

“Hey, how does this look? Better huh? I want to see how this flows, how to compress the line spacing etc etc. Kinda challenging and tiring huh!”

This text is in a text element. The global default is set to a line height of 2. In this text element, I put the following:

[x_responsive_text selector=”.h-responsive” compression=”2.5″ min_size=”14″ max_size=”24″]

Hey, how does this look? Better huh? I want to see how this flows, how to compress the line spacing etc etc. Kinda challenging and tiring huh!

First of all, the responsive part is not working, don’t know what I am doing wrong. Secondly, I put a line-height:1 in there but it has no effect. If I change it line-height:3 (more than the global default), then it does take effect.

Thx
Anil

Reply To: Changing line spacing in a text element

Thai — Wed, 29 Jul 2015 12:10:17 +0000

Hi There,

Please try following CSS instead:

#x-section-1 .x-text p {
    line-height: 1.5;
}

Let us know how it goes!

Reply To: Changing line spacing in a text element

amparanjape — Wed, 29 Jul 2015 15:42:35 +0000

Where should I put this? It appears in the customizer->custom->CSS part, right? Or can I put this in the text element code itself? Sorry, very new to html/css etc, so please pardon my ignorance!

Reply To: Changing line spacing in a text element

Zeshan — Wed, 29 Jul 2015 16:53:33 +0000

Hi Anil,

Yes, you can use this code under Custom > CSS in the Customizer.

Cheers!