Search code examples
javascripthtmlcsslightbox

gLightbox Custom Description not working properly on mobile

I'm using gLightbox on my site. I am using the description: custom-desc; feature to make the description. The link works great when on desktop. However, as soon as I switch to a mobile device the link doesn't work. It's just showing up with the text.

const glightbox = GLightbox({
  selector: '.glightbox'
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/css/glightbox.css" integrity="sha512-iQ3H4A+iyBTP8M4ypX5PrTt2S+G1zmRjf0k0uOASKlFHysV8TL9ZoQyVwPss0D12IBTMoDEHA8+bg8a1viS9Mg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="col-xl-4 col-lg-4 col-md-6 portfolio-item filter-present">
  <div class="portfolio-info">
    <h4>heading</h4>
    <div class="d-flex align-items-center justify-content-center">
      <img src="https://dummyimage.com/600x400/000/fff" title="Quick View" data-gallery="portfolio-gallery" class="glightbox preview-link" data-glightbox="title: title; description: .custom-desc16;"><i class="bi bi-zoom-in"></i>
      <div class="glightbox-desc custom-desc16">
        <a href="https://google.com" title="Full Property" class="full-property-link">Link that doesn't work<i class="bi bi-link-45deg"></i></a>
      </div>
    </div>
  </div>
</div>
<!-- End Portfolio Item -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.min.js" integrity="sha512-S/H9RQ6govCzeA7F9D0m8NGfsGf0/HjJEiLEfWGaMCjFzavo+DkRbYtZLSO+X6cZsIKQ6JvV/7Y9YMaYnSGnAA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.js" integrity="sha512-B15xrHLAFUGC5w4jO8iQtCLLaliORCeLUCewc3Pjrtzw6y2ZXECO6bHalENItF5p/yPpz02fGL/luT/Bs17WnA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

It shows up like this on mobile while in my dev tools. It's completely removing the a href altogether.

I can provide link to dev site if that would help.

Solution

  • You need to set moreLength:0. gLightbox's default moreLength is 60.

    For full explanation, please see here.

    For example on how to set it, see here.