After modifying contact form, footer is no longer sticking to bottom

So after trimming down some unnessisary content from the HTML, the footer is no longer sticking to the bottom of the page. I made zero changes to the CSS and I don’t understand why this is happening. Here is a jsfiddle of the situation.

Do you mean the gap under the footer?
That is caused by the pseudo element ::after the .wrapper element.

That looks to be part of a very old fashioned Sticky Footer technique and is required.

The reason its not working is because the closing div for .wrapper is completely missing and thus the 100% height and negative margins are missing.

Replace the closing div here:

      <div class="col-sm-2"></div>
    </div>
  </div>
</div><!-- this was missing -->
<!-- footer -->
<footer class="container-fluid text-center">

And then remove the margin from the p element in the footer to avoid creating a scroll on the viewport when not needed.

footer p{margin:0}

Note that the sticky footer technique you are using is not responsive so make sure that your footer height never exceeds the 60px height you have set and then you should be ok.

A responsive Sticky Footer technique needs a specific structure and is shown here and here.

1 Like

Thought they must be linked in some way, with that same height: 60px being applied to the footer and pseudo element.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.