Почему заголовок превышает ширину экрана на маленьких экранах?

Question

У меня есть сайт, созданный с помощью Bootstrap v4.0.0-alpha.6, вот ссылка на сайт: bit.ly/2xEmQ7U. Пожалуйста, добавьте https: // в начале URL

Специально для мобильных браузеров, заголовок превышает ширину, а содержимое занимает около 30-40% ширины экрана.

Это показано, когда я уменьшаю окно браузера примерно на 490px, хотя я использую Chrome, который является современным браузером.

Проблема действительно очевидна на мобильных устройствах, я тестировал ее на Android.

Существует таблица стилей под названием home.css, которая содержит библиотеки (Bootstrap, Fontawesome и т. Д.) И пользовательские CSS.

Я попытался дать body и html margin: 0 и padding: 0 и overflow: hidden.

Также пытались удалить некоторые элементы и изменить некоторые свойства стиля.

Но я не смог заставить его работать.

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

Answer 1

Как я уже упоминал в комментарии, проблема была в вашем .hero-unit. (Раздел анимации букв)

Попробуйте добавить overflow: hidden; код в css

.rotating-words {
    display: inline-block;
    position: absolute;
    margin-left: 5px;
    overflow: hidden; /*Added newly*/
}

Answer 2

Проблема в мета области вашего просмотра, используйте ниже область просмотра

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1" />