Bootstrap4: ширина немного широка на мобильном устройстве с анимацией (вызывает прокрутку внизу)

Question

Я делаю DEMO для веб-сайта с использованием Bootstrap Framework и AOS - библиотека Animate on scroll.

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

Вот ссылка: https://doc.digitalsolutioner.com/

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

Я хочу, чтобы на мобильном телефоне была правильная ширина без горизонтальной прокрутки.

Answer 1

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

Как и в fade-left положение по умолчанию равно right: 0, поэтому при каждом вызове fade-left начало с 0 и переполнение экрана создания.

Таким образом, здесь есть две опции,

1. Не использовать fade-left
2. Установить начальное значениеэлемента

Answer 2

виновник - это следующий класс внутри нижнего колонтитула ... для проверки: перейдите в конец страницы;проверить элемент;удалите это свойство (в инструментах разработчика браузера), чтобы увидеть, как оно вызывает появление горизонтальной прокрутки

[data-aos^=fade][data-aos^=fade].aos-animate
{   transform: translateZ(0);   }

. Самый простой способ решить эту проблему - скрыть свойство overflow-x от вашего тела.Этот CSS будет самым простым способом , чтобы получить эффект затухания, не видя свиток внизу:

body {
    overflow-x: hidden;
}

Обновление : на мобильных устройствах и мобильных эмуляторахпоявляется горизонтальная полоса ... это было связано с полями в классе card-service, просто удалите свойства margin-left и margin-right в медиа-запросе (как показано ниже), чтобы решить эту проблему.

@media (max-width: 576px){
  .card-service {
     /* margin-left: 15px; */
     /* margin-right: 15px; */
     margin-bottom: 25px !important;
  }
}