[dgregscottParticipant]

Hello there –

My website is http://www.bullseyebreach.com. I see in the GUI I can adjust body and content font types and sizes. How to adjust line and paragraph spacing?

And what’s the difference between body elements and content elements?

It’s a book website with a few extracts and some extra short stories and I’d like to make the formatting on all that text look more book-like if possible.

thanks

[DarshanaModerator]

Hi there,

Thanks for writing in!

#1. To control certain spacing on the site, please refer to the article here (https://theme.co/x/member/kb/element-spacing/). Within your Text Editor, if you just hit “enter” will add double spacing and for single spacing, you will need to use “shift+enter”.

#2. All elements are resides the body tag of the HTML markup. So the rules apply to the body is more generic and those styles can be overwritten on any elements inside. Content elements refers to the elements inside a post or page. I would recommend this tutorial which has a nice walkthrough on how to use the Typography features in X (http://theme.co/x/member/kb/customizer-typography/).

Hope that’s clear.

[dgregscottParticipant]

Thanks. But I’m still lost. I looked through the video and the link about element spacing. But it doesn’t answer what I’m looking for.

My website has some pages with short stories of roughly 2000 words – lots of text. The lines of text auto wrap. I don’t hit “Enter” after each line of text, I let the auto-wrap handle it. This is good because it responds well to different display sizes. But unlike the posts in this forum, the website text looks like each line uses 1.5 spaces before the next line. And each paragraph looks like it uses 3 spaces before the next paragraph. I want to bring that down to single line spacing between auto-wrapped lines with one blank line between paragraphs.

It looks like the typography customizer GUI lets me change pretty much everything except the spacing between lines and paragraphs.

I have a hunch I will need some custom CSS to do that, and the second link above might give me some clues, but I don’t understand what it’s trying to tell me.

thanks

– Greg

[FriechModerator]

Hi Greg,

The space between paragraphs are the paragraphs margin-bottom, by default it was set to 2.15em. On CSS there is a property line-height to control the text line spaces by default is was set to 1.8. To adjust this properties you can add this under Custom > CSS in the Customizer.

.entry-content p {
	margin-bottom: 1em;
	line-height: 1.25;
}

Adjust (in decimal) the values where you see it fits.

Hope it helps, Cheers!

[dgregscottParticipant]

I just put that in and it looks nice. Thanks! Take a look:
http://wwww.bullseyebreach.com

How do I do comments? Is it

# this is a comment

or

/* this is a comment */

That way when I look at this again in a few months I’ll know why I put in that CSS.

For a future release – would it be possible to put that capability in the GUI? Even better – the ability to set a default and then modify per page or maybe define custom paragraph classes to modify fonts, spacing, and so forth for different paragraphs would be really nice for websites with lots of text.

thanks

– Greg

[ZeshanMember]

Hi Greg,

You can add comments like this: /* this is a comment */

And thank you for your feedback, I’ll forward it to our development team.

Thanks.

[Author]

Posts