Code to alter line-spacing please?


(Mary Davidson) #1

I am using Lander theme in default and have been happy not to need to add any code. However the lines of text on one of my styled text pages would look better in single spacing and the default seems to be double spacing.

Can someone please tell me CSS code to change default double spacing to single spacing.

Any help much appreciated.

Thanks
Mary


(Doug Bennett) #2

It appears that the default line hieght is set to 1.5;

you can change that by adding the following CSS:

body {
	line-height: 1.1;
}

You can play around with the number.


(Mary Davidson) #3

Thanks so much for your help Doug. Don’t know what I’m doing wrong - I’ve entered that piece of code into the CSS column in the Inspector but it doesn’t seem to alter anything. I tried a few different heights … 1.1, 1.0, 0.5 but it still stayed the same.


(Doug Bennett) #4

An URL to your site would be helpful, and maybe a screen shot of were you placed the code.


(Doug Bennett) #5

Sorry was looking at the wrong theme.
may want to try this:

#content {
	line-height: 1.2;
}

Again try changing the number.


(Mary Davidson) #6

Ah success!

Thanks so much Doug - the second piece of code worked a treat. I’ve now added it to all my text pages and I think they look a lot better. I love the Lander theme, it’s exactly the style I was looking for, it’s so simple and straightforward for someone like me who knows nothing about creating websites! but the default line-spacing was just a bit wide.

Thanks again for your help.
Mary
www.marydavidson.co.uk


(Yuriy Nemets) #7

Hi guys! I will greatly appreciate any help regarding the same subject: is it possible to change line spacing for one or several specific text stacks only, instead of changing line spacing for the whole website? Thank you!


(Doug Bennett) #8

Should be able to do that. A URL to your site and specifics about what you want changed would help.


(Yuriy Nemets) #9

The website is www.nyllaw.com At the bottom, I used the 2 Columns layout from the stacks library to separate the logo (on the left) from the disclaimer (on the right). I want to change the line spacing in the disclaimer, to make the space between the lines smaller. Thank you!


(Doug Bennett) #10

give this a try:

#stacks_out_40873_page4 {
    padding-top: 15px;
    line-height: 1.0;
}

You can play with the size and I added top padding, you can adjust or remove.


(Yuriy Nemets) #11

It worked! Thank you so much!!!


(Yuriy Nemets) #12

May I ask you one more question? My website has three versions - English, Russian, and French. I used the code for the English version, and it worked well. I tried using the same code for the other two versions, but it wouldn’t work. Do you think I need to change something in the code to make it work for the other two versions? The respective links to the other two versions are in the right upper corner of the home page - nyllaw.com Thank you very much!


(Doug Bennett) #13

Try this on French page:

#stacks_out_41411_page2 {
    padding-top: 15px;
    line-height: 1.0;
}

This for the Russian page:

#stacks_out_40560_page0 {
    line-height: 1.0;
    padding-top: 15px;
}

(Yuriy Nemets) #14

Thank you so much!!!