网站从浏览器到平板电脑都响应，但是在移动设备上没有响应。 我该如何纠正？

Question

I made a portfolio website using HTML, CSS, Bootstrap 4, and jQuery. The site seems to be acting just fine on the browser and up to tablet mode. However when I look at the site on my phone, I seem to be able to scroll into a blank area, the text within my banner image seems to get cut off and the my image in the "about me" portion shrinks to nothing. The website is www.reallybilly.com if I am not explaining it very well.

I have played around with different viewpoints, and have tried different width's with @media nothing seems to be working.

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;
 }

I am hoping to make it completely responsive without having to redo the whole project.

Answer 1

From inspecting your site, remove the 'padding:100px;' from your #about CSS assignment. That padding is what's causing it on a mobile device.

Better yet, use an @media to set that padding only when on a tablet or larger viewport.