Элементы шире окна - 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