網站從瀏覽器到平板電腦都響應，但是在移動設備上沒有響應。 我該如何糾正？

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設置填充。