Currently developing a responsive website, everything is running smoothly except for one issue. When I pinch zoom in on mobile and scroll down, a large white bar appears below the entire page, stretching across the screen width. How can this be fixed? Below is my footer code:
<footer id="footer">
<img id="footer-logo" src="imgs/logo.png" alt="White-Tails Icon">
<h4 style="vertical-align:bottom;">Copyright © West Shore White-Tails 2019</h4>
<h3 id="check-out-sm">Check out our Social Media!</h3>
<div class="tooltip">
<span class="tooltiptext">Visit Facebook</span>
<a target="_blank" href="https://twitter.com/ClubWscc"><img src="imgs/fbIcon.png" alt="Twitter Icon"></a>
</div>
<div class="tooltip">
<span class="tooltiptext">Visit Twitter</span>
<a target="_blank" href="https://twitter.com/ClubWscc"><img src="imgs/twitterIcon.png" alt="Twitter Icon"></a>
</div>
</footer>
The structure of my entire page is as follows:
<body>
<wrapper>
<other elements>
</wrapper>
It's important to note that the scrollbar does not appear within this white area...
Edit: Here is the relevant CSS code:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-image: url("../imgs/bg.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-x: hidden;
}
footer {
width: 100%;
height: 20%;
background-color: #080808;
text-align: center;
bottom: 0;
border-top: 1px solid white;
position: static;
padding-bottom: 40px;
}