Archived topic
Gap between bottom of content and footer
3 replies · Started by Duncan on October 20, 2021
I'm building a website and I would like to create the effect of the footer being part of an image at the bottom of the homepage. In my case, it is a mountain scene where the bottom of the image is the same color as the footer - like they have done here.
The problem is that there is a white bar between the home page content and the footer. I assume that it is padding but I can't find anyway to remove it. I have included a link to the site in the private information section.
I am using a different image at the bottom of the homepage for mobile than I am for desktop and tablet so I don't know if i'll need to adjust the padding for mobile, desktop and tablet separately.
Thanks,
Hi Duncan,
You can try give the image block (both desktop and mobile) an additional CSS class, eg. mountain-image:
https://wordpress.com/support/adding-additional-css-classes-to-blocks/
Then add this CSS:
figure.mountain-image.wp-block-image {
margin-bottom: -7px !important;
}For mobile, set the content container bottom padding to 0, but this will affect the entire site:
https://docs.generatepress.com/article/content-padding/
If you only want it to apply to the front page, then try this CSS:
.home div#content {
padding-bottom: 0;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Thanks! Giving the image block an additional CSS class worked for both mobile and desktop.
You are welcome :)
