Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – footer is not sticking to the ground

This is how the footer is looking only on the Contact Page of the client’s website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.

enter image description here

I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.

.footerclass {
  background-color: #eeeeee;
  position: fixed;
  top: auto;
  bottom: 0;
  width: 100%;
  display: inline-block;
}

It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.

How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.

Tags:

2

Answers


  1. 0

    Add position: relative to your main container (from what I can see that’s your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
    It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn’t enough content to scroll, the footer will still be at the bottom of the page.

    Login or Signup to reply.
  2. 0

    The problem is with style

    @media (min-width: 768px){
  .elementor-section.elementor-section-height-full {
    height: 100vh;
  }
}

    Easiest hack would be to add this to your custom css, but with height "auto".

    Screenshot from inspector, where it is:

    Screenshot from inspector, where it is

    The issue is not with footer, but with content overflowing behind this because of fixed height.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search