Sticky footer everywhere, except main page

Shapely
1

Hello, I’m trying to make a sticky footer, but the problem is, when it is enabled, it overlaps parallax image and messes everything up. On pages with little or no content it looks fine. Is it possible to somehow fix it in CSS?

This is the problem with content and overlaping

When there is no content on simple pages, it looks fine

Thanks

2

Hey there,
I hope you’re doing well today

Kindly send the URL to your site so we can we can look into the issue for you.

Best Regards,
Support

3

My site url is http://www.dovanupakavimas.vhost.lt/ (it is in developement stage). My question once again is, how to make footer at the bottom after scrolling, because now when you scroll down footer stays at the same place and messes everything up. Thanks for helping.

4

Hello there,

You can use the following CSS code to fi the footer by going to Appearance > Customize > Additional CSS and pasting it there.

/*Sticky footer fix*/
#colophon {
    position: relative;
}

Best Regards,
Support

5

I have added this line to my custom CSS, but then in pages with little content footer is not in the bottom as you can see here.

6

Nevermind, fixed it with this piece of code, thanks anyway!

html, body {
    height: 100%;    
}
#page {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#masthead {
	flex: 0 0 auto;
}

#content {
    display: flex;
    flex-direction: column;
	  flex: 1 0 calc(100% - 56px);
}

.header-callout {
	flex: 0 1 auto;
}

.content-area {
    flex: 1 0 auto;
}

.footer-callout {
	flex: 0 1 auto;
}

#colophon {
    flex: 0 0 auto;
}
7

Hello there,

I am glad that you found a suitable solution.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support