Подписи, видимые в веб-браузере, но не в мобильном

Question

Я адаптирую шаблон и не могу заставить его работать. Заголовок фотографии отображается в браузере, но не в мобильном телефоне. Отсутствует ли код или я должен изменить его. Также не знаю, подходит ли код CSS для этого класса =

Заранее спасибо за помощь!

https://imgur.com/fOd7ejh

https://imgur.com/2A6dxH8

HTML

.portfolio-overlay {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
  height: 100%;
  position: absolute;
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.portfolio-overlay .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 30px;
  text-align: left;
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  opacity: 1;
}

<div data-groups="[&quot;people&quot;]" class="col-md-3 col-sm-6 no-pad">
  <div class="portfolio-item">
    <a href="../media/galeria/bonito-bodoquena/1.jpg" title="Test 1" class="swipebox"><img src="../media/galeria/bonito-bodoquena/1.jpg" alt="">
      <div class="portfolio-overlay">
        <div class="caption">
          <h5>Test 1</h5><span>Lorem ipsum dolor sit amet</span>
        </div>
      </div>
    </a>
  </div>