Сайт реагирует от браузера к планшету, но не реагирует на мобильные устройства.Как мне это исправить?

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, чтобы установить этот отступ только на планшете или в большом окне просмотра.