[Support request] Reduce or Add Space Between Blocks

Home Forums Support Reduce or Add Space Between Blocks

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1294363
    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

    #1294654
    Leo
    Staff
    Customer Support

    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?

    #1295915
    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

    #1296116
    Leo
    Staff
    Customer Support

    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

    #1296628
    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

    #1296855
    David
    Staff
    Customer Support

    Hi there,

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

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

    #1296880
    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

    #1297074
    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

    #1297080
    Leo
    Staff
    Customer Support

    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.

    #1297132
    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

    #1297148
    Leo
    Staff
    Customer Support

    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

    #1297194
    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

    #1297212
    Leo
    Staff
    Customer Support

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

    Then the CSS would be:

    p.less-space {
        margin-bottom: 0.5em;
    }
    #1297226
    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

    #1297510
    Leo
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.