[Resolved] How do I reduce white space between the WP blocks?

Home Forums Support [Resolved] How do I reduce white space between the WP blocks?

Home Forums Support How do I reduce white space between the WP blocks?

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #2206977
    Trish

    Hi,

    WordPress has complicated their software so much that if it weren’t for the amazing support at GeneratePress, I’d seek out a new CMS. WordPress frustrates me THAT much.

    I need to be able to reduce white space between 2 blocks of text and cannot figure out how to do that. See screen print here: https://www.awesomescreenshot.com/image/26570178?key=9f1262e52621944f058a74a85fd40194

    Please help?

    Thank you in advance,
    Trish

    #2207013
    Leo
    Staff
    Customer Support

    Hi there,

    Is there a reason why you are using the columns block there?

    It doesn’t look like it’s needed.

    #2207018
    Trish

    Well, I could use one giant block of HTML to get the style I’m after, but I am trying very hard to work with WordPress’s more complicated Block Editor.

    So yes, for me, the white space really does need to be reduced by at least half of what it is.

    Do you see the page-ID as being 40?

    #2207041
    Leo
    Staff
    Customer Support

    Have you considered using GenerateBlocks? It will make things super easy to create what you are trying to do here without any CSS at all.

    And yes the ID of that page is 40.

    #2207054
    Trish

    No thanks Leo. Tried that plugin once and that frustrated me more. I do NOT like page builders.

    Why software developers insist on reinventing the wheel is beyond me!

    I’ve spent HOURS today TRYING to discover HOW to remove the white spaces and NOTHING is working.

    Am VERY tempted to just add a BIG block of HTML custom and paste my entire page in HTML. Grrrrrr, I do NOT like WordPress anymore!!!!! Ranting now done.

    #2207060
    Ying
    Staff
    Customer Support

    The space if from 2 elements:

    1. H2’s bottom margin: https://www.screencast.com/t/D5n6FCFL
    2. WP columns bottom margin: https://www.screencast.com/t/EyvwDLbb

    This CSS will remove the bottom margin of the H2:

    .page-id-40 .wp-block-column h2 {
        margin-bottom: 0;
    }
    #2207066
    Trish

    Tired changing under Additional CSS : https://www.awesomescreenshot.com/image/26574710?key=8015a2ce1e0551070f08b711299fd5ff after trying the code you gave me to use didn’t work (as I found that idea among the MANY things I did try earlier today… with no luck).

    Tried you code again… and still doesn’t work. 🙁

    #2207099
    Fernando
    Customer Support

    From my end, the CSS provided, which you’ve added seems to be working as expected.

    See this as proof: https://share.getcloudapp.com/5zuLlzWR

    Can you try clearing your browser’s cache and test again?

    If you would like to further remove the remaining spacing, which is coming from the WordPress Columns Block’s bottom margin, you may add this CSS as well in Appearance > Customize > Additional CSS:

    .page-id-40 .wp-block-columns {
        margin-bottom: 0;
    }

    Or if you would like to remove all default bottom margins for WordPress Columns Blocks, use this code instead:

    .wp-block-columns {
        margin-bottom: 0;
    }

    Hope this clarifies. 🙂

    #2207152
    Trish

    Thank YOU Fernando… the second CSS script worked, but not the first one. Why?

    And you’re right… I do want all of the white spaced between the blocks reduced: https://www.awesomescreenshot.com/image/26580395?key=5b3217080b6257792e26d75932f25172

    Plus… the original page… ID 40… turned out something on the page was corrupted and that’s why the trouble with the CSS NOT being seen.

    So created a brand new page (same address) which now has a different ID… and now the page can see the CSS added to the Simple CSS textbox below the Edit textbox or window.

    I do not understand why Ying’s script and your first one did NOT work, please?

    #2207158
    Fernando
    Customer Support

    The original page has an ID of 40 and the new one seems to have an id of 93 which is why the code didn’t work.

    A more appropriate code would be:

    .page-id-93 .wp-block-columns {
        margin-bottom: 0;
    }

    Hope this clarifies. 🙂

    #2207163
    Trish

    OOOOh my gosh… it must be ’cause it’s after midnight here and I’ve been struggling with this issue for far too long today. I feel like an idiot.

    You’ve got it so my spacing is perfect… except I would like the HR tag closer to the bottom of the “Watch at Anytime…” line. I’ve tried adding it as HTML code so that the HR is away from the bottom line of text, like it is. Tried adding a vertical alignment, but that’s not working for me.

    Any suggestion would be greatly appreciated.

    #2207173
    Fernando
    Customer Support

    You may add a class my-hr to the Separator Block as such: https://share.getcloudapp.com/kpuJG0Ky

    Then, add this CSS in Appearance > Customize > Additional CSS:

    hr.my-hr {
        margin-top: 0px;
    }

    Kindly modify the value 0px to your preference.

    Hope this helps! 🙂

    #2207181
    Trish

    I added the CSS in Appearance > Customize > Additional CSS, the HR block STILL won’t vertically align to the top.

    Tried changing the color, but that too has made no difference;

    hr.my-hr {
        margin-top: 0px;
        color: gray;
    }

    and

    hr.my-hr {
        margin-top: 0px;
        color: #d3d3d3;
    }
    #2207186
    Trish

    Hey Fernando,

    Found the separator block offers an “Align top”, and when I selected TOP… the block ignored that.
    https://www.awesomescreenshot.com/image/26582455?key=2419361f6c23c9504525b15f3fda549f

    Even tried removing the Additional CSS class in the right-hand sidebar, to see if that might be interfering with the Align top option… but that failed, so I put the my-hr back and still… nothing.

    #2207188
    Fernando
    Customer Support

    There seems to be no class added to the HR tag. May I know how you’re adding this tag?

    If it’s through a separator Block, to confirm, are you adding the class in the Additional CSS classes of the Block?: https://share.getcloudapp.com/6quZ46oz

    It should appear on my end if so. Otherwise, if you’re adding this through an html Block, you would need to modify the HTML itself and add the class.

    Kindly let us know

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.