Currently, I am facing an issue where my footer is constantly floating on top of my div. Surprisingly, this problem only occurs on mobile and tablet resolutions while working perfectly fine on desktop view.
The main problem lies in the fact that the footer keeps obstructing the content of the page at lower resolutions such as mobile and tablets.
Although I have diagnosed the root cause behind this issue, I am struggling to find a suitable solution. The main culprit here is a floating div that overlaps the footer. Interestingly, other pages demonstrate no signs of this issue with the footer functioning as intended. For reference, I have included the necessary CSS code below.
Here is a snippet from the problematic page:
<div>
<img />
</div>
<div class="overFlow">
Floating div positioned above the image, causing the footer overlap
</div>
<footer>
Footer element that remains stationary on desktop but floats on mobile devices
</footer>
<style>
.overFlow {
position: absolute !important;
top: 50%;
left: 0%;
}
</style>