[FilParticipant]

I had done some searching around for this and was coming up with a lot of JS related solutions that involved “pushers” to keep the footer at the bottom of a page. I am a newcomer to CSS and JS (I do however have quite a bit of exposure to statistical programming) so I apologize for any inconsistencies in terminology etc.

The crux of my issue (and the reason I can’t resolve it by simply using the “absolute” or “fixed” footer attributes is this:
– My screen is 1080 pixels in height.
– I have a background image that spans the full space (it’s actually a little bit higher res for use with even larger screens).
– I would like to assign a solid color to the footer (it is currently transparent)
– For pages that have overflow, this is fine, because the footer appears at the end of the scroll area (and the bottom of the background image)
– For pages that DON’T have overflow, this is a problem because the footer pushes up (default attribute “relative”) and then I have an ugly solid band of color across the screen where the footer is followed by the remainder of the background image.
– If I use “fixed” attribute then the footer is in the way for pages that have overflow.
– If I use “absolute” attribute then as I scroll I get a hanging footer.

I’ve examined some of the JS solutions (a couple in CSS even) but it wasn’t necessarily obvious to me how to implement without botching things.

I have a child-theme installed where I’ve made my other CSS edits.

Curious whether you can point me in the right direction here.

Thanks,

Fil

[NicoModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[FilParticipant]

analyticsfortraders.com

I have “Under Construction” enabled, so you’ll probably need access to admin. I’ll set up a user account for Themeco and share the creds via a private reply.

Fil

[FilParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Without adding any JS code to make your footer sit at the bottom of the page, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

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

We would loved to know if this has work for you. Thank you.

[FilParticipant]

Rock n roll guys. Exactly what I was asking for.

Ironically seeing it in action I’m having second thoughts about the design aspect, but functionality-wise that’s spot on.

Many thanks,

Fil

[Rue NelModerator]

Hello Fil,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts