My footer is causing overlap issues with the div above it on my mobile website. Here's a visual representation:
Current view on my phone:
https://i.stack.imgur.com/RpvWM.png
Desired view:
https://i.stack.imgur.com/KHVcm.png
The code for the area boxes is as follows:
<div class="area-blocks">
<div class="box-area col-xs-6">
<div class="area-box">
...
</div>
</div>
<div class="box-area col-xs-6">
<div class="area-box">
...
</div>
</div>
</div>
CSS for the area boxes:
.box-area {
background-color: #BA5e8e;
padding-right: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.box-area:nth-child(2n) {
border-radius: 10px 0 0 10px;
}
Footer code:
<div id="footer">
...
</div>
CSS for the footer:
#footer h2 {
color: #FFFFFF;
margin-bottom: 20px;
}
...
@media (max-width: 767px) {
.footer-top {
...
}
}
I hope this information helps in identifying the issue. Thank you! ~ Rik