网站从浏览器到平板电脑都有响应，但在手机上没有响应.我该如何更正

Question

我使用HTML、CSS、Bootstrap 4和jQuery制作了一个公文包网站。该网站在浏览器和平板电脑模式下的表现似乎都很好。然而，当我在手机上查看该网站时，我似乎能够滚动到一个空白区域，我的横幅图像中的文本似乎被剪掉了，"关于我"部分的我的图像缩小为零。如果我没有很好地解释的话，网站是www.reallybilly.com。

我用不同的观点玩过，也用@media尝试过不同的宽度，似乎什么都不起作用。

body,
html {
height: 100%;
max-width: 100%;
}
.banner {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 
0.5)),
url("../imgs/city/IMG-5676.JPG");
height: 100vh;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
}

我希望它能完全响应，而不必重做整个项目。

Answer 1

在检查网站时，删除"padding:100px；"来自您的#about CSS作业。这种填充是导致移动设备出现这种情况的原因。

更好的是，只在平板电脑或更大的视口上使用@media设置填充。