Boostrap 4 на мобильном телефоне позволяет прокручивать экран вправо до белого экрана (с нижним колонтитулом)

Question

На моей домашней странице веб-приложения, которое я делаю, есть фотографии, которые масштабируются до 450px.В мобильном устройстве все идеально помещается на экране, но веб-приложение позволяет мне прокручивать вправо до нуля, а нижний колонтитул торчит вниз.Я думаю, что это как-то связано с моим телом и / или содержанием и классами нижнего колонтитула.Я использую div class="content" для своих фотографий, который центрирует их в середине трех рядов в настольной версии.У меня уже есть это в моем коде:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">

И мои классы выглядят так:

body {
    margin: 0px;
    overflow-x: hidden;
}

.content {
    max-width: 450px;
    margin: auto;
}

.footer {
    height:50px;
    width: 100%;
    background-color: white;
    background-image: none;
    background-repeat: repeat;
    background-position: 0% 0%;
    border-top: .5px solid #F5F5F5;
    position: fixed;
    bottom: 0pt;
    left: 0pt;
    -webkit-box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
    box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
}

Вы можете видеть, что я попробовал overflow-x: hidden;, но это не сработало, иЯ пытался настроить поля и отступы для класса body и row, но это не сработало.У кого-нибудь есть хорошее решение?

Answer 1

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

Ваша проблема звучит так, как будто приложение не очень отзывчиво (метатег не делает его таким, если ваш другой HTMLне настроен правильно), но не может быть уверен, не взглянув на имеющийся у вас html.

Одним из предложений будет либо поместить весь ваш код в тело в классе контейнера, либо просто изображение div:

<div class="container">
   <!-- Content here -->
</div>

или

<div class="container-fluid">
   <!-- Content here -->
</div>

Это то, что я обычно использую, чтобы сделать некоторую часть отзывчивой (вы также добавляете ее в тело).