[Resolved] Changing the inter-line spacing

[Marco Caprio]

Hi, I recently upgraded to GP Premium v1.1.
I was able to make almost every desired personalization to my website layout, except one: now I’d like to change the inter-line spacing of text content.
I’ve looked around for a while, but I haven’t found any specific command… so I’m wondering if it is possible to accomplish this task WITHOUT writing code in the Plugin Editor.
Thanks for your support!

[Tom]

Hi Marco,

Are you wanting to increase/decrease the spacing between paragraphs?

If so, CSS like this should work:

p {
      margin-bottom: 20px;
}

Then you can adjust the pixels to your liking.

You can use the plugin in my signature to add this CSS, so you don’t have to use the editor.

Hope this helps 🙂

[Marco Caprio]

Perfect, thank you Tom!

Best regards,

Marco

[Tom]

You’re welcome 🙂

[Collin]

I just came across this while rebuilding our site. Very helpful! It will help me with several sites where I hated the default spacing in the themes.

[Tom]

Glad it’s helpful! 🙂

[Don]

I’ve designed with DW for years and more recently WP and now graduated to GP. I have not had a problem with line spacing until now. The lawyer I am designing for wants the line spacing in paragraphs reduced slightly. (I don’t want to, but I am just the web designer:)

Here is what I have in “Edit CSS”:
p {
margin-top: 1px;
margin-bottom: 10px;
margin-right: 100px;
margin-left: 4px;
}

I’ve tried values from 0 to 400px and it changes nothing. To me it is obvious it is being overridden by some later CSS code. I view with the “Preview” button which usually is an up to date version with no cache problems. Also emptied cache.

Here is more code that doesn’t work:

/* Font Size, but all settings are overridden someplace */
.entry-content {
font-size: 27px;
}

I do not have a Child Theme with this site, but use the “Edit CSS” Add On.

I’ve never accomplished much with the “Edit CSS” since using GP??

I need help,
Don

[Tom]

I think you’re looking for line-height.

So it would be:

p {
    line-height: 17px;
}

Adjust as needed 🙂

[Tully]

Hi Tom,

How would I change the line-height for mobile view only? Thanks

[Tom]

You would do this:

@media (max-width: 768px) {
    p {
        line-height: 17px;
    }
}

[Tully]

Thanks Tom. I had tried that with no result, but when I removed the p and {} it worked?

[Tom]

That’s strange, that should break the CSS as it’s not proper syntax.

The above will only apply to paragraphs – is the text you’re targeting inside paragraphs?

[Tully]

I would have thought the text was in paragraphs, but I don’t really know what I am talking about so perhaps not!

[Tom]

If you’d like to link me to a page where it’s not working I can take a look 🙂

[Tully]

Its all working fine with the P and {} removed thanks Tom, so all good.

[Author]

Posts