Footer on Mobile

[SydeL]

Hello Everyone,

I need the Footer to remind at the bottom of the page. Not in the center. Even with having little to no text on page (See Attached). Thanks in Advance!

[lely]

Hi @SydeL,

It happens because there’s not enough content to push the footer on the bottom. To avoid this, please add a minimum height on the section. Inspect the section, go to Customize Tab > Element CSS. Try adding the following:

$el.x-section{
  min-height: 100vh; /*Adjust 100 vh as needed*/
}

The following might also help:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• Minimum height - https://www.w3schools.com/cssref/pr_dim_min-height.asp

[SydeL]

Hello Lely

i am not finding Customize Tab > Element CSS

[Prasant]

Hello @SydeL,

Thanks for updating the thread.

I have recorded a screencast that you can take a look at to navigate under Customize > Element CSS.

Thanks.

[SydeL]

Hello Thanks for responding. But i didn’t use the Pro Page Builder to build the page. i Used WPbBakery page builder. Is there another way to fix the issue? Thanks!

[ruenel]

Hello @SydeL,

I can see that you are using the default header and footer. To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-template-template-blank-8 .x-main {
    min-height: calc(100vh - 98px);
}

.x-container.max.width.offset {
    min-height: calc(100vh - 439px);
}

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

[SydeL]

Hello RueNel,

Thanks alot! It worked perfectly.

[friech]

We are delighted to assist you with this.

Cheers!