How to remove the white space under my page when zooming in on mobile
Question
I am working on a responsive website, everything works fine except when I pinch zoom in on mobile and scroll down, there's a big white bar under my entire page that stretches across the entire width of my screen. How do I get rid of this? Here's 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>
My entire page is structured as
<body>
<wrapper>
<other crap>
</wrapper>
It's also worth noting that the scrollbar doesn't appear in this white area...
Edit: heres relative css
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;
}
1 answers
solution1
0 2019-11-23 09:26:25
it can come from the css. Can you add your css for the body, html and all the footer's elements? Also, what you can do is to inspect element as a mobile device (in the chrome browser) and see what creates this space.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.