[juiceweddingbandParticipant]

Hi,

I’ve working on my site at the moment, and would like to change the line height of some of the text elements in my home page. I’ve increased the font size, and the lines are a bit close together. However, no matter if I put the code in a style box on an individual text element, or use it with within a p tag within the custom css settings for the page, it doesn’t change anything!

Within the text elements style box I have been using – line-height: 1.8: (I’ve tried various different values, plus I’ve also tried adding em or % values as well)

Within the page custom css settings I have been using –

p {
line-height: 1.8:
}
(again, I’ve also tried various different values plus em and % values with no luck)

The home page is http://www.juiceweddingband.com – I’ll put my login details in a private message as well.

I’m just starting to learn css, so forgive me if I’ve missed something! However, I’ve been able to alter font size, weight, margins, etc with no problems. This seems like a pretty simple piece of code, but I must have missed something!

Thanks for your help.

Rod

[juiceweddingbandParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! As you are styling with span tag inside the text it might preventing you to see the changes or preventing the code to work – http://prntscr.com/8u5de1

As you can place all the styling including color, you don’t need to put an extra span tag on the editor to style it again. Please remove this and place all the CSS on the style field. If you can’t see the line-height changing on live, then Save the page and see if it works on front-end as sometimes it might not show on live preview instantly or might be overwrite by other style.

Hope this helps.

Cheers!

[juiceweddingbandParticipant]

Hi,

Thanks for coming back to me, and for the tip about not using span tags in the text editor. I removed the span tag, and it didn’t make a difference. I don’t like torturing you guys all the time, so I took a look at various other settings, including the custom css settings in the customiser, and noticed that it had the following code:

p {
line-height:22px;
{

That looked like the problem to me, so I took it out, and now the line-height property is working! :0) However, I never put that code there! How did it get there? Also, there’s another piece of code at the top (which I have left there):

.x-text p:last-child {
margin-bottom: 0;
}

I didn’t put that there either! What does that do?

I noticed the two pieces of code there before, as I added a bit of code (that you gave me) to hide tags, but never thought about what they might do, as I’ve only started learning about the basics of css this week!

Sorry for all the questions, however if I understand things better, then hopefully I won’t need the support as much!

Thanks again for all your help.

Rod

[Paul RModerator]

Hi Rod,

Sorry, we have no idea who put in the code as well.

This code simple removes the margin of the last paragraph in a text element

.x-text p:last-child {
    margin-bottom: 0;
}

and this code adjust the line height of paragraphs in general(site wide)

p {
   line-height:22px;
{

Reference for line height

http://www.w3schools.com/cssref/pr_dim_line-height.asp
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height

Hope that helps.

[juiceweddingbandParticipant]

That’s great, thanks for explaining that.

Rod

[Prasant RaiModerator]

We’re delighted to assist you with this.

[Author]

Posts