Line spacing on about page

Please anyone, just spent like 2 hours trying to fix this.

There are different ways to handle this. If you want space between paragraphs throughout your site, you can modify the Constructor style.css file.

Save a copy of the original style.css file in case anything goes wrong so you can restore the original. Open style.css in a text editor like notepad (for PC) and find

.hentry .entry p{
    text-indent:12px;
    margin-bottom:4px
}

Change it to

.hentry .entry p{
    text-indent:12px;
    margin-bottom:16px;
}

Save the file as style.css (that is, don’t change the name). If you are using Windows, make sure it doesn’t add .txt to the file name. Now use FTP software like WS_FTP (there’s a free trial) or Cute FTP on a PC to upload style.css and copy over the existing style.css.

You can adjust the margin-bottom value to your liking. Try 16 and see how it looks.

I’m assuming you know how to use FTP software, but that might not be true. Let me know if not.

You can also do this “manually” using in-line CSS. That’s fine for once or twice, but if you want your changes to apply to all paragraphs, it’s better to use the method above.

For in-line, in the HTML editor window of WordPress, you can do this to a paragraph.

Say you have some text like this.

Put the follow code before and after it.

<p style=”margin-bottom:16px”>Put the follow code before and after it.</p>

Oops. I meant “put the following code” not “put the follow code”

<p style="margin-bottom:16px">Put the following code before and after it.</p>

As for eliminating the automatic indent, please give your URL so I can see what you mean and I’ll see if I can find the CSS responsible for it.

Great I will try this and get back to you.

Is there a way to control the amount of space between paragraphs on a case by case basis? Inserting ‘
‘ doesn’t seem to be working.

My site is rebornsails.com.

Thanks

What a brilliant concept! Good luck in your reborn sail venture.

Can you give a specific page and paragraph so as to see what kind of case by case you mean?

I would create a class called “deep-margin” or something along those lines and give it a larger margin.

On my about page I would like to list the Brands and some info about them. When I do this now, well you can see the results. If i could customize a way to put more line spaces after the descriptions then it wold look normal.

In your case, open your stylesheet.css and use

body.page-id-2 p { margin: 20px 0; }

where 20px can be adjusted according to your preference. It will adjust both top and bottom margins of the paragraphs on About page.

The case by case technique is the second one above.

Use the HTML editing window. Find the paragraph you want to add more space above and/or below, and insert the HTML <p> tag around it like this:

‘<p style=”margin-bottom:16px”>This is your paragraph text.</p>’

This adds 16 pixels of space below the paragraph. To add space above and below, you can use margin-top and margin-bottom like this:

‘<p style=”margin-bottom:16px; margin-top:16px;”>This is your paragraph text.</p>’

Be sure to click the Update button when you are finished.

The only reason I recommend not using inline styling: If you don’t like it, that’s a LOT of changes overtime.

@mcbuzz’s recommendation WILL work, but in the long run it’s better to make global calls to elements through your stylesheet, particularly when you want to give a uniform style to more than 3 elements.

Note that you don’t need the single quotes on either end. It should look like this in your HTML window.

<p style=”margin-bottom:16px; margin-top:16px;”>This is your paragraph text.</p>

@chase Adams is right. The global technique is best for anything but a one-time change. I don’t know @rebornsails website URL so I can’t look at the CSS.

I looked at the Constructor theme and assumed that
‘.hentry .entry p{
text-indent:12px;
margin-bottom:4px
}’
was the right general paragraph formatting. But @rebornsails – if you tell us your URL, I can check.

URL is rebornsails.com [noted earlier in thread]

I think the best solution may be a hybrid of the two suggestions:

body.page-id-2 .hentry .entry p {
margin-bottom: 20px;
}

This will ONLY change the margin for the paragraphs on the About page. If you want to use it sitewide, just remove the .page-id-2.

@mcbuzz be sure to use the ` mark for code, it’s just below your escape button.

@chase Thanks! I thought is was the ‘ single quote. Now I see it. So that’s what a backtick looks like.

No problem!

It took me a long time to figure it out on my own. It would have been nice if someone had let me know.

It’s all about pushing the community forward, so thanks for your involvement in the forum!

—————————–
Chase Adams
The Chase Scene | Chase Your Passion
Do You have a gravatar? Set it up!
Twitter — @realchaseadams