[Resolved] How do you delete the space between footer and block immediately above?

[Clare]

Hi there. Can you provide directions on how to delete the space between the footer and the block immediately above it? Shown on all pages on this website: youreasymove.co.nz Thanks!

[Elvin]

Hi Clare,

There are 2 causes for this.

The 1st half of the space is from the theme’s settings. It’s the content’s padding set from Appearance > Customize > Layout > Container. The padding-bottom set on the Content Padding setting is causing a gap between the content area and the footer section directly below it.

The other half of the space is the margin-bottom coming from the atomic block holding your content. The theme doesn’t control this and we’re not exactly sure how the plugin that adds it functions. It’s best to ask the plugin developer on how to remove the margin-bottom.

[Clare]

Thanks for your reply Elvin. I’ve changed the container padding bottom to zero. Is there any css code I can add? I saw a similar question on another post that suggested adding some code (https://generatepress.com/forums/topic/how-to-remove-the-space-between-blocks/). I tried the same code and it worked, only it also changed other parts of the page as the question requested alterations to areas other than just the footer. Thanks

[Clare]

OK, I’ve added the same code Leo recommended on the other post

(.entry-content > [class*=”wp-block-“]:not(:last-child) {
margin-bottom: 0;
}
figure.wp-block-image {
line-height: 0;
}

and with a little bit of adjustments to spacing of other elements above the footer and plugin, it seems to have worked to remove the space above and below the plugin on some pages but not on all. Any ideas? Thanks

[David]

Hi there,

the problems will be many as each core block requires some bottom margin – for example on your About Us page -the space is there because of the margins on the BlockQuote. Tricky to fix that with a single CSS rule but you could give this a shot:

.wp-block-group .wp-block-group__inner-container {
    padding-bottom: 20px;
}
.wp-block-group >*:last-child {
    margin-bottom: 0;
}

It will a. Give all Group blocks some bottom padding and b. Remove the bottom margin from the last block inside a group block:

But you will need to check carefully this doesn’t create unexpected results for other parts of the site.

Alternatively – I would use the GenerateBlocks plugin and its Container Block instead of a group block – it has full Spacing controls which would allow you to add/adjust bottom padding where its required

[Clare]

Thanks David. I tried the code but unfortunately it doesn’t work, it reverted back to having spacing before the footer on all pages, so I’ve retained the code Leo suggested on the other post.
I also tried the Container block instead of the group block for the quote on the About Us page but that didn’t allow me to run the container across the full width of the page (I’ve now changed to having a simple quote block with no background colour as an interim solution). My main issue now is the Packages and Offers page which is the only page that has the gap above the footer. I wonder why this page is behaving differently to the others. Any ideas? Thanks.

[Ying]

Hi Clar,e

also tried the Container block instead of the group block for the quote on the About Us page but that didn’t allow me to run the container across the full width of the page

In order to make the container block full width, you’ll need to set the page to full width in page editor
https://docs.generatepress.com/article/content-container/
https://www.screencast.com/t/5PqVECofwWbj

The space above the footer is coming from the element above the footer, you need to remove the margin-bottom from that block.
https://www.screencast.com/t/5PqVECofwWbj

[Clare]

Hi Ying.

Changing the content container in the page editor to full width creates the problem of the rest of the text outside of the quote running off the page.
Re the spacing above the footer, its an Atomic block and has no margin bottom that I can see. The strange thing is that the (Leo) code has fixed the spacing issue on other pages (that have exactly the same blocks) just not on this one – https://youreasymove.co.nz/packages-and-offers/

[Ying]

Leo’s code only works on WP blocks and the blocks can NOT be the last one in the content.

In this page, this CSS applies to this block and the blocks before it, not the last one (Let’s talk about your move)
https://www.screencast.com/t/eeHm6viC1G78

And in About us page, you have an empty paragraph block below the orange block(Let’s talk about your move), so the orange block is not the last one. In this case, the CSS applies.
https://www.screencast.com/t/b97gFHnb0J

I hope you can understand how this CSS work after my explanation.

You can actually modify a bit Leo’s CSS to this:

.entry-content > [class*="wp-block-"] {
    margin-bottom: 0;
}
figure.wp-block-image {
    line-height: 0;
}

Let me know how it works.

[Clare]

Thanks again Ying. I’ll be honest with you I’m a bit lost. The ONLY page with an issue (a white space above the footer) is the Packages and offers page, NOT the About us page. I tried your new code and it removes the space before the footer on the Packages and Offers page but then reverts all the other pages so there is a gap above the footer??? Leo’s code works on all pages apart from the Packages and Offers page and your code works on the Packages and Offers page and not the others.

[Ying]

Hum… It seems Leo’s code is to overwrite another code, once I modify the code, it can’t overwrite the original one.

Try this then:

body .entry-content > [class*="wp-block-"] {
    margin-bottom: 0 !important;
}

[Clare]

Yes, that worked! Thanks so much for your perseverance Ying 🙂

[Ying]

You are welcome Clare 🙂

[Author]

Posts