Essential Grid overlaps my footer

[psft]

Dear support team,

My Essential grid overlaps my footer (please see the attached screenshot) and I can’t find the way to fix it or find any solution in the forum.
I do not know if it’s a problem of the configuration within the essential grid panel itself or something else.

I would appreciate your help. Thank you very much in advance.

[thai]

Hi @palelita,

It seems happen for the first time I visit the people page only.

Can you please try adding this custom JS under Theme Options > JS?

jQuery(document).ready(function($) {
	setTimeout(function(){
		$(window).trigger('resize');
	}, 1000);
});

Let us know how it goes!

[psft]

Thank you, Thai.

Could you tell me please, more details about where should I add the custom JS? I guess must be inside Theme Editor, but I don’t know exactly where.

[thai]

Hi @palelita,

The custom JS section is located under X > Theme Options > JS.

Please follow these screenshots:

Hope it helps

[psft]

Thanks Thai!
it seems to work… but the grid loads very slowly. So, in some point of the process, you can see the footer higher than the bottom and a blank space below it (please see the attached screenshot below).

Can it be due to my previous JS configuration? Before, I added a code in order to leave the footer fixed at the bottom. This is my whole Js code:

(function($){
$(window).on(‘load resize’, function(){
var H = $(window).height(),
W = $(window).width();
if( W > 980 && H > $(’#top’).height() ){
$(’.x-colophon.bottom’).addClass(‘bottom-fixed’);
} else {
$(’.x-colophon.bottom’).removeClass(‘bottom-fixed’);
}
});

jQuery(document).ready(function($) {
setTimeout(function(){
$(window).trigger(‘resize’);
}, 1000);
});

[paul.r]

Hi @palelita,

You can try removing your js code to test the case.

For the mean time, you can try adding this in Cornerstone > CSS

.x-main.full {
    min-height: 1597px;
}

Hope this helps

[psft]

Hi Paul,

I’ve already deleted the JS code and added the CSS code.
it seems to work because there is not blank space below the footer and not grid overlapping neither.
But on those pages where the content is not so long, there is a lot of blank space between the content and the footer. (for example, in this page https://www.clon2.psft.eu/research/)
How can I fix this?

Thank you very much!

[ruenel]

Hello Pamela,

Please have the custom css code given by @Paul.r be updated and use this instead:

.page-id-41 .x-main.full {
    min-height: 1597px;
}

We would love to know if this has worked for you. Thank you.

[psft]

Hi RueNel,

Thanks for your help but I’m afraid it has not worked. I’m still can see the blank space below my footer.

This is the CSS code that I have now regarding the footer:

.x-colophon.bottom.bottom-fixed {
position: fixed;
width: 100%;
bottom: 0;
}
.page-id-41 .x-main.full {
min-height: 1597px;
}

[ruenel]

Hey Pamela,

Your custom css making the footer as fixed is causing this issue.

Please remove both of the codes:

.x-colophon.bottom.bottom-fixed {
position: fixed;
width: 100%;
bottom: 0;
}
.page-id-41 .x-main.full {
min-height: 1597px;
}

And replace it using this code instead:

.site .x-main {
    min-height: calc(100vh - 434px);
}

This nifty css code will set a minimum height of the x-main which will always position the footer at the bottom of the page without getting any empty spaces below the footer area.

We would love to know if this has worked for you. Thank you.

[psft]

It worked perfectly!! Thanks!

Last question: how can I reduce the space between the content and footer? I don’t need so much blank space there (also, the footer looks a bit cut on the bottom, probably due to this excess of space)

[rad]

Hi Pamela,

That’s the result of pushing the footer so it stays on the bottom. Try reducing the value of 434px from that CSS, but again, that will only fix it on your view.

The only solution to reducing the gap between content and footer is increasing the amount of your page content.

Thanks!

[psft]

I understand. At least, increasing the value 434px I could fix the cut on the bottom.
Thanks again for your excelent support!

[mldarshana]

You’re welcome