[Resolved] Reduce or Add Space Between Blocks

[Linda]

Hi Support,

Can you please help me with 2 issues. You can see both issues on this page on our staging site: http://stage.mygoforthegreen.com/our-company/

1. How to add space between 2 lines in the initial heading/title under company name, “We optimize …”. I copied this 2 line heading from a Word document so there is a br tag putting title on 2 lines (that should be removed, correct?); if I remove br tag and make 2 separate headings, they are spaced way too far apart. So perhaps this question should be “reduce space between headings” instead???

2. How to reduce space between a heading and a bulleted list. This refers to all 3 bulleted lists. I’d like them to be closer to the headings which precede them.

I suspect this is a CSS issue, so am happy if you can link me to an explanation to save you time explaining it to me (although I always like your explanations)!

Thanks for your help once again,

Linda

[Leo]

Hi Linda,

1. Try this:

h2.has-text-align-center {
    line-height: 1.5em;
}

2. Those headlines are just normal <p> so I can’t target them. Can you add a custom CSS class for those?

[Linda]

Thanks, Leo. I’ll read over the CSS info you provided in your link to remind myself how to set up Custom CSS classes and where they go on the edit page.

I think the code you gave me goes in the Customizer under CSS. Think I also need to add a customer class in the edit page, too, under Additional CSS. Correct? Your link will probably help me with what to call it??

When you don’t get into this more technical stuff on a regular basis, it sure doesn’t stick!!

Linda

[Leo]

The code we provide would be added using one of these methods:
https://docs.generatepress.com/article/adding-php/

CSS classes can be added in the sidebar if you are using the Gutenberg editor:
https://www.screencast.com/t/SGkYXcLOUf

[Linda]

Oh, thanks so much for the clarification, Leo! 🙂 I was off on the wrong track.

I already have the Code Snippets plugin so will add your code to that to see what happens and let you know.

UPDATE
Hmm. I pasted your code into Code Snippets, New but got 2 Xs: Parse/syntax errors re. “}” in line 1 and unexpected “em” in line 2, wanted “;”. I could get rid of first error by changing } to :, but that didn’t fix the others. Realize I don’t really know what I’m doing here.

Tried to Google a way to fix this, but am coming up short. Can you tell what I’m doing wrong … please. I’ll keep searching and let you know if I can find a solution before you can get to this.

Thanks,

Linda

[David]

Hi there,

i think Leo accidentally posted the wrong article. That code is CSS – follow these instructions:

https://docs.generatepress.com/article/adding-css/

[Linda]

Hi David, thanks for the redirect. Sorry I wasn’t able to see the difference between PHP and CSS!! Duh. Will check out your link and let you know how it goes.

Linda

[Linda]

Hi again, David,

Used the CSS plugin and it worked perfectly for the text on the page. Of course, I noticed it was a plugin created by Tom so no wonder it worked and was so simple to use! 🙂

Questions:

!. Since I added it to the CSS box in Customizer while on the company page, does that mean it will apply only to that page? I hope.

2. Can you point me to where I can find CSS to reduce the space after headings and after some paragraphs?

Thanks for your help!And I hope you are staying safe and well during this virus discombobulation!!

Linda

[Leo]

1. If the CSS is in the customizer then it will apply to every page. If you need to code to apply to a specific page, then you will need to add it to the Simple CSS metabox in the edit page screen.

2. Which headings are you referring to here?

You will need to add a custom class to those “some paragraphs” so we can target them specifically.

[Linda]

Hi Leo,

1. Yes, I figured it would apply to whole site in Customizer, but I had first looked on the edit page sidebar and could not find anywhere to put in the code. I thought it would go in an Additional CSS box. I’ve now found the metabox under the main part of the page and added it there – worked! Deleted it from Customizer first.

2. The 2 paragraphs I meant are the ones that have bulleted lists following a line of non-bolded text. Will the link you provided tell me how to do this? I hate to keep bugging you!!

Thanks for your help!

Linda

[Leo]

Like these two here?
https://www.screencast.com/t/vEku0cMfk

You’d need a custom class to those two paragraphs as I’ve shown in the screen capture here:
https://generatepress.com/forums/topic/reduce-or-add-space-between-blocks/#post-1296116

Then we can provide the CSS.

The class name can be whatever you want like no-margin

[Linda]

Aha, got it. Yes, those were the correct two.

So I called the first CSS class less-space and the second one less-space-again. Or can I use the same class name for both since I’m doing the same thing (deleting space after) for both? If so, I’ll rename the second one the same.

Thank you SO much, Leo, for your detailed guidance!!

Linda

[Leo]

Use the same class if you want the exact same spacing.

Then the CSS would be:

p.less-space {
    margin-bottom: 0.5em;
}

[Linda]

Perfect! I’ll play with this over the weekend and let you know how it all turns out. From your CSS I see I can reduce or increase the spacing by adjusting the em distance.

Will experiment with the first to see if the new spacing is the same as what I’m trying for in the second. If so, I’ll call it by the same class name as you suggested.

This has been wonderful learning, Leo. You’ve have really helped my understanding of CSS, class names and how to use both. I’ll enjoy trying it all out! 🙂

Again, many thanks, and back to you soon,

Linda

[Leo]

No problem 🙂

[Author]

Posts