наложенное изображение и текстовое поле не реагируют на первую страницу на мобильном устройстве из-за столкновения текстового поля с изображением - PullRequest
Новая
       28

наложенное изображение и текстовое поле не реагируют на первую страницу на мобильном устройстве из-за столкновения текстового поля с изображением

0 голосов
/ 26 апреля 2020

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

https://healthierdimensions.com/

Здесь все, что нужно сделать оверлейное изображение. 

}
.background-image-holder img {
  display: none;
}
.background-image-holder.fadeIn {
  opacity: 1;
}
.parallax > .background-image-holder,
.parallax .slides li > .background-image-holder {
  height: 100vh;
  top: -50vh;
  transition: all 0s ease !important;
  transition: opacity 0.3s ease !important;
  -webkit-transform-style: preserve-3d;
}
.parallax:first-child .slides li > .background-image-holder,
.parallax:first-child .background-image-holder {
  top: 0;
}
.main-container > a:first-child + .parallax .background-image-holder {
  top: 0;
}
@media all and (max-width: 767px) {
  .parallax > .background-image-holder,
  .parallax .slides li > .background-image-holder {
    top: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

и я думаю, что это для текстового поля, текстовое поле просто перемещается вниз по странице, когда экран уменьшается. Цени любую помощь! 

.feature-2 i {
  display: block;
  width: 80px;
  max-width:100%;
  height: 80px;
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}
...