X Pro Footer Does not stay at the Bottom of the page

[Dfoster]

Hi, I am having trouble on page responsiveness of our site, www.thinkwearact.com. Please let me know how can I make our global footer stay at the bottom of the page. Thank you!

[paul.r]

Hi,

To fix it, try adding the code below in Customize > Inline CSS

    min-height: calc(100vh - 131px);

[Dfoster]

Hi, I tried this fix and put it on global css at .x-main class because I need the footer to remain at the bottom globally. However, it creates extra spaces on the following devices (please see image below), I also confirmed it using my mobile device. I am looking for a solution that would fix this globally. Thank you.

[basanta]

Hi There,

The gap depends on the content section height not the main section.
The background and the content is a different section. Please add the CSS to the section where you have the background and the content.

Just edit the section and put the CSS as inline as mentioned by @paul.r.

Hope this clear.

Thanks

[Dfoster]

Hi, my mistake, thank you for correcting my error. Footer is already fixed. Thanks a lot!

[christopher]

Glad that we could be of a help

[Dfoster]

Hi, there are still some pages on our site that this error occur. May I ask a global solution so that the footer always stay at the bottom of the page? Thank you very much!

[ruenel]

Hello There,

Thanks for updating. To make sure that the footer will stick to the bottom even if you only have a fewer contents in the content area, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

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

211 is the total height of the footer and the top/bottom margins of the content area.

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