Подписи карусели не накладываются на изображение на мобильном телефоне

Question

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

https://main.thcguard.com/

Answer 1

я думаю, что этот блок кода решит вашу проблему, добавьте их в ваш собственный файл .css ... дайте мне знать, если у вас есть какие-либо вопросы

@media screen and (max-width: 680px) {
  .carousel-caption {
    top: 0;
  }
  .carousel-caption h1 {
    font-size: 1.5rem;
  }
  .carousel-caption .btn {
    padding: .3rem 1rem;
    font-size: 1rem;
  }
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
  .carousel-indicators {
    display: none;
  }
  .carousel-item {
    height: 330px;
  }
}


/*max-width:680px*/

@media screen and (max-width: 420px) {
  .carousel-item {
    height: 220px;
  }
} 

Answer 2

Див с классом "карусель-заголовок" абсолютно позиционирован.Я бы создал медиа-запрос для вашей мобильной точки останова, а затем либо установил бы этот div в относительное положение, а затем убил бы дно: 20px;ИЛИ сохраняйте его в абсолютном положении и настройте нижнее значение по своему вкусу.