I am currently working on a website built with "WordPress", and I have implemented a mobile footer plugin that is designed to only appear on mobile devices. However, I am encountering an issue where the page content overlaps the footer on phones.
I attempted to use z-index in my CSS code to ensure that the footer div appears on top of the page content rather than behind it, but unfortunately, this approach did not seem to resolve the problem. Here is the snippet of my CSS code for the mobile footer div:
#callbook {
bottom: 0;
height: 48px;
left: 0;
position: fixed;
right: 0;
z-index: 100;
-webkit-box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
-moz-box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
}
In an attempt to troubleshoot the issue, I added padding-bottom:48px; to the code to check if the div was present, which confirmed its existence. However, the main problem persists as the page continues to overlap the footer div. Any assistance you can provide would be greatly appreciated!
Thank you in advance!