How to remove padding from site-wide footer

Hello,

I believe I already sent a response regarding the footer on your previous tickets. However, I cannot see/remember which one.

You’re using custom CSS code to assign a background image for your footer and adjusted the max-width of the content containers. If you want to expand the background image and footer container, add this custom CSS code:

.footerclass {
    background: transparent url(https://globalgrowthpublishing.org/wp-content/uploads/2021/07/GGP-Footer.png) no-repeat center center;
    background-size: cover;
}
.footerclass .container {
    max-width: 1500px;
    width: 100%;
}

This is how it should look like after the change – https://share.getcloudapp.com/p9uNXWDX.

Hope this helps.

Regards,
Karla

Your trick worked. Many thanks! I also thought we addressed this issue as well because the footer did indeed stretch across the screen until some recent updates were made in the CSS. Unfortunately I don’t know what exactly caused the difference since I made so many changes at one time. Here’s everything in my Advanced Settings before applying the code you just sent. Maybe you’ll be able to see what caused the footer to revert to the shorter version and let me know what in there could have caused this glitch so that I can attempt to avoid making this same mistake again:

.headerclass .container {
    width: 100%;
    padding: 0;
}
.virtue_banner img {
    width: 100%;

    max-height: 400px;
    padding-bottom: 40px;
}
.topclass .kad-topbar-right {
    width: 100%;
}
.topclass .kad-topbar-right p {
    margin: 1em 0;
}
.topclass .kad-topbar-right a {
    display: block;
    text-align: center;
}
.topclass .kad-topbar-left {
    display: none;
}
@media (min-width: 1200px) {
    #content.container {
        max-width: 1500px;
        width: 100%;
    }
}
h2#global-growth-publishing {
    font-family: 'Baskervville'; 'bold'
}
.page-id-956 div#logo {
    display: none;
}

Hello @nobuhlesibusiso,

I believe there is nothing in the custom CSS code you sent that has affected the background-image size of the footer. I also tried applying it via the Chrome browser dev tools, and the footer appearance did not change.

If I may assume, it is possible that the custom CSS code before was deleted at some point which is why the background image did not occupy the full width of the footer row.

Hope this helps.

Kind Regards,
Karla

I’m sure you’re probably right. Thank you for all your assistance.