Почему мой Bootstrap и медиа-запрос не отвечают

Question

У меня есть такие проблемы, что когда я конвертирую свою сеть в мобильный режим, она масштабирует всю страницу и оставляет пробелы справа сверху вниз, как мне это исправить, пожалуйста.

Вот ссылка на мой сайт https://juvielone.github.io/Juvie/

Изображение пустого пространства в мобильном режиме:

Answer 1

Ваше изображение .prof-pic имеет ширину 21,875 мм или 350 пикселей (21,875 * 16 пикселей). В сочетании с отступами для #about-me и .col-lg-6 этот элемент будет выходить за пределы ширины многих мобильных устройств.

Решение 1: Используйте медиазапрос для установки меньших размеров на мобильных устройствах.

Например

.prof-pic {
    width: 13.875rem;
    height: 13.875rem;
}

@media (min-width: 576px) {
    width: 21.875rem;
    height: 21.875rem;
}

Решение 2: Сделайте изображение отзывчивым

Поскольку вы используете Bootstrap 4, вы можете использовать вспомогательный класс .img-fluid для .prof-pic, чтобы сделать изображения плавными (max-width: 100%). Поскольку вы хотите, чтобы изображение имело постоянное соотношение, вам также необходимо обрезать изображение, чтобы оно стало квадратным. Это также поможет с искажением изображения.