1

I have been asked to have a look at an issue on a site where by the footer position seems to overlap the content.

The CSS for the position is:

#jsn-footer {
    position: relative;
    font-size: 13px;
    line-height: 22px;
    color: #acacac;
    padding: 55px 0;
    margin-top: 30px;
    clear: both;
}

If I alter the margin I can manually clear the content, however this will overlap again if the content becomes large. Is there a definitive way to ensure that it never overlaps the content. I have used clear:both but this does not seem to do anything.

Example URL can be found here

Any suggestions would be most welcome. Regards D

Edit:Link removed

Improve this question

1 Answer 1

Reset to default
2

The issue comes from the .clr class that you have set on an element near the bottom of the content. This class is setting the element to a height of 0, thus the footer is being pushed up.

Remove this class (screenshot below):

enter image description here

Improve this answer
2
  • Thanks for pointing that out :) Learning new things everyday is brilliant. Edited - this is a component override so my previous comment is void. Apologies.
    – Dtorr1981
    Commented May 24, 2017 at 10:47
  • 1
    @Dtorr1981 - glad it helped :)
    – Lodder
    Commented May 24, 2017 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.