Spacing Problem Between Post Content/Blocks and Footer

  • Unknown's avatar
    jemilaaderofluker98 · Member ·

    Hello! I am looking for some help figuring out how to delete the spacing between the post block and the footer. All of my pages on this website have a weird space between the last block and footer, while the header is flush to the content I have at the top of the page. I have tried using Appearance Editor and going to the header and footer template to fix it to no avail. Is there any way I can fix this problem?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jemilaaderofluker98 · Member ·

    This is the page that is my main concern: https://nolachef504.catering/test-page/

  • staff-totoro · Staff ·

    Hi there, I can see the spacing issue in that page and it appears to be an issue with that page only, from what I can see. Are you having this spacing issue on other pages too?

    Thanks for the additional info!

  • staff-totoro · Staff ·

    Hi again,

    After taking a closer look, it seems that this CSS was able to remove the footer spacing in my tests. Does this work for you if you add it to the custom CSS for your site? 

    footer..site-footer.wp-block-template-part {
    margin-block-start: 0;
}

    You can add that here in your Custom CSS settings

    Hope that helps. Please let us know if you have any more questions.

  • Unknown's avatar
    jemilaaderofluker98 · Member ·

    Unfortunately, adding that to the Custom CSS settings did not work. My current theme, Munchies, allows for full site editing.

  • Unknown's avatar
    jemilaaderofluker98 · Member ·

    Also, I am using a cover block to make a website background and want the footer to be flush at the end of that block.

  • staff-95percentghost · Staff ·

    Also, I am using a cover block to make a website background and want the footer to be flush at the end of that block.

    If this is happening on all your pages then it looks like possibly the ‘margin’ CSS for your footer template part might still be the culprit. Since the footer template part itself doesn’t directly offer a margin setting, you may still need to use CSS to adjust it. If you could test the following adjusted CSS we can review and adjust it further if need be.

    To add CSS code: head to your Site Editor at Appearance > Editor. In there, you can start editing any template; it isn’t important which one.

    Within the editing screen, open the Styles panel (round black/white circle icon), click the three-dot button, and select “Additional CSS”. Here’s a screenshot for reference:

    In there, please could you try adding the following:

    footer.wp-block-template-part, footer.site-footer.wp-block-template-part, footer..site-footer.wp-block-template-part {
margin-block-start: 0px;
}

    If you find that doesn’t work too well, I’d suggest also

    1. Removing the final section footer..site-footer.wp-block-template-part from this CSS and also
    2. Removing the additional dot from the footer’s class name box, as typically you don’t need to place it there – it’ll come through correctly in the CSS of the live site:
  • Unknown's avatar
    jemilaaderofluker98 · Member ·

    Both of these fixes work excellently in the editor, but as soon as I switch to the live site and am no longer in the editor, I still see that unpretty off-white space above the footer. But then, after making that second change, if the first option didn’t work too well and reuploaded the website, the spacing for all the cover blocks became too much. It seems like with this website, every time I try to do a fix, it messes up something else.

    This is supposed to be centered, but it’s no longer that way.

    Way too much spacing now.

  • Unknown's avatar
    jemilaaderofluker98 · Member ·

    UPDATE: I have fixed the space issue and put the code you gave back in. But it is still only showing it fixed with the post content flush to the footer in the editor.

  • Unknown's avatar
    jemilaaderofluker98 · Member ·

    Image of fix in the editor.

  • aleone89 · Staff ·

    Hey there,

    Thanks for reaching back out.

    It looks like this CSS, was written incorrectly, and stopping the footer CSS from working. 

    body > div.wp-site-blocks > header {
  background:#ffff;
  height:0px;
  z-index:999;
  margin:0 auto;
  border-bottom:0px solid #dadada;
  width:100%;
  position:fixed;
  top:0;
  left:0;
  right:0;

	padding-bottom:var(--wp--custom--spacing--large, -3rem)

    I’ve commented out this CSS, and the code supplied works.

    What does the code above do, or what are you aiming for exactly? We can perhaps look to correct this for you. :)

    I hope this helps!

  • Unknown's avatar
    jemilaaderofluker98 · Member ·

    That code was to make the header full width of the website. I also wanted it to be sticky and stay at the top of the website when scrolling down or up. Th footer problem is fixed, but the header now has problems. I will be deleting that code and hopefully that will help in my quest for everything to work and for something else not to break.

  • staff-totoro · Staff ·

    Hi @jemilaaderofluker98 thanks for clarifying. One thing to be aware of is that while we are expert in general WordPress questions, we are not expert in CSS. That is a skill that takes web designers many years to be come proficient in.

    We do have the ability to help with small code fixes, but for bigger design tasks it can be problematic to have several different individuals offering code snippets like this. In some cases those snippets can conflict with one another, and this is less of an issue if you have one person crafting the code changes on your site.

    We have more advice for working with a developer to help you craft your site here: https://wordpress.com/support/working-with-a-developer/

  • The topic ‘Spacing Problem Between Post Content/Blocks and Footer’ is closed to new replies.