White space above and below footer

Hi,

Please try to add the below CSS code from the Customize > custom CSS, and check.

@media only screen and (max-width: 767px){
.col:not(.slick-slide), .blog-entry {
    margin-bottom: 0px;
}
}

@media (max-width: 599px){
.elementor-1236 .elementor-element.elementor-element-350cd8d5 > .elementor-element-populated {
     margin-top: 0px;
}
}

Abhishek, that took care of the white space above the footer, but the white space is still below/under the footer. I left the CSS there for now. Thanks for the quick response, and I appreciate your theme. I switched from Astra to this theme, and I’m liking it more. Looking forward to a full resolution. Thanks!

Hi,

Please try to add the below CSS code for the footer.

@media screen and (max-width: 1024px)
body {
    margin-bottom: 0px;
}

No dice, either. I tried the three separately and in combination, and the only one that makes a difference is:

@media only screen and (max-width: 767px){
.col:not(.slick-slide), .blog-entry {
margin-bottom: 0px;
}
}

However, it only removes the white space above the footer, whether by itself or with the top-margin snippet. So that you can see what the last snippet does, I left it with the top-margin snippet. Thanks for your quick and diligent help.

I swapped themes again, and confirmed that the white spaces don’t show in the Astra theme. I temporarily deleted all the content on the products page, and it made no difference. I temporarily removed the header and footer content and it made no difference. However then, when I removed the header and footer (made them “draft” status), the theme header showed up and had a white space above it, also. I then went through Appearance > Customize and tried to uncheck and zero everything I could related to the header. I couldn’t get the theme header to not appear, but I got rid of the white space above it. However, it had no effect on the footer white spaces.

Hi,

It is working at my end, please clear the cache of your site and try using the code with important.
Replace the previous code with this one.

@media screen and (max-width: 1024px)
body {
    margin-bottom: 0px !important;
}

I swapped in this snippet and cleared the cache. The white space is still there above and below the footer on multiple devices…

Hi,

Sorry missed the parenthesis in the code, please use this one.

@media screen and (max-width: 1024px) {
body {
    margin-bottom: 0px !important;
}
}
@media only screen and (max-width: 767px) {
.col:not(.slick-slide), .blog-entry {
    margin-bottom: 0 !important;
}
}
@media only screen and (max-width: 480px) {
.col {
    margin-bottom: !important;
}
}

It looks like that fixed it! Thanks for your persistence!

Glad to hear that the issue has been fixed!