Элементы шире окна - CSS

Когда я просматриваю свой сайт с браузером Safari на смартфоне (iPhone) или MacBook, некоторые элементы моего сайта шире, чем окно браузера, например. body -tag. Я проверил сайт с помощью dev-tool, и кажется, что он начинается с ширины 600 пикселей и снизу. Я не вижу эту проблему в Chrome.

Вы можете увидеть скриншот здесь и посмотреть, что окно имеет ширину 375 пикселей, но body -tag имеет ширину 439 пикселей.

Я применяю эти CSS-правила, потому что я читал, что это должно решить проблему, но это не для меня, к сожалению.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Вот веб-сайт, о котором я говорю: http://www.firma-info.no

Надеюсь, у кого-то есть совет для меня.

Спасибо заранее!

Ответ 1

Я тестирую Firefox на рабочем столе в отзывчивом представлении

Но я обнаружил, что облака в фоновом режиме x1, .x2 etc. заставляют окно быть больше по ширине, чем ожидалось. Это тот случай, когда облака приближаются к концу их анимации.

A Просто overflow: hidden; к #page выполняет задание.

Я не знаю, вызвало ли это вашу проблему, но, в любом случае, это может помочь.

Также я бы рекомендовал использовать transforms translate для перемещения облаков, а не поля внутри вашей анимации.

Ответ 2

Вы можете легко исправить это, выполнив загрузку или установив ширину в процентах, а не в размере пикселя.

У Bootstrap есть специальные классы div для размера столбца, которые настраиваются с размером экрана и довольно легко реализуются

т.е.

<div class="col-xs-2 col-sm-2"></div>
            <div class="col-sm-8 col-xs-12" align="center" id="content">

вам нужно реализовать это в главном теге вашего документа

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ответ 3

дать переполнение-x: скрыть тег body в css