Remove empty space between blocks

  • Resolved generalnumpty

    (@generalnumpty)


    3 years, 8 months ago

    Using Neve to build a page when I add a block I get a white space between it and the next block. How can I remove the white space. Any Ideas please.

    Just playing and testing myself. I see that if I use a Otter section to start off any content then I can set margins and padding.
    So Have I answered my own question.

    If so what about the pages I have already built where I did not start off with an otter section but just a paragraph block for example. How can I convert the block to an Otter section.

    • This topic was modified 3 years, 8 months ago by generalnumpty.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @generalnumpty,

    I am afraid that you can not transform a block into a section. You can only change it to another block type or style, by clicking on the block, and then on the first element that appears, then choose your preferred block. https://prnt.sc/10du224

    You can either modify that white-space using CSS, and add it into Customzier -> Additional CSS- for example: modifying all spaces below paragraphs on the whole site to have the value of 10px, you can add : 

    
p {
    margin-bottom: 10px;
}

    You can also add modification CSS modification directly to the blocks, as in this link: https://wordpress.com/support/adding-additional-css-classes-to-blocks/

    I hope this was helpful! Please let us know if you have any more questions.

    Thread Starter generalnumpty

    (@generalnumpty)

    Great thank you. Can that 10px be anything I need – as in 0px.

    I will do some reading and test the individual block css option.

    I installed orbit fox and see those block options but in the blocks to choose pop up it says Orbit fox AND Otter. Getting confused – did otter come with the Neve theme or did it come with Orbit fox.
    IF I delete orbit fox then will I loose otter and then all the build that I did with otter sections – like closing up the gaps.

    So with the p {
    margin-bottom: 10px;
    } css
    in my additional css for the wp site do I add the p in the block css to trigger it on that block. Or do I need a different css to do it that way

    Hi @generalnumpty,

    You can modify that value to fit your needs.

    Orbit Fox comes with a few features, including Gutenberg Blocks – This feature activates the Otter blocks so you can add them to create more relevant content for your site using the WordPress Block Editor. You can check out more here about Orbit Fox: https://docs.themeisle.com/article/951-orbit-fox-documentation

    The code provided before triggers all the paragraph blocks from your site to have a certain margin-bottom.
    To refer to a specific block, in the editor, you can select the block you would want to change a feature to -> Advanced -> Additional CSS class(es). For example, I have two paragraph blocks added. To the first one I have a class named ‘paragraf1’, and for the second ‘paragraf2’ https://prnt.sc/10g6684 (this screenshot is for the first block, I have done the same for the second)

    To add features to there you can edit them in the Customizer -> Additional CSS, like in the following example https://prnt.sc/10g67d3 -> Here I have removed the bottom margin of the first block, and have changed the background color for the second block.

    I hope this was clear and helpful. Please let us know if you have any more questions.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Remove empty space between blocks’ is closed to new replies.