Portfolio Hover Collection Title & Autoplay on Mobile

Hi,
Would really appreciate some help with the way the portfolio collection page is displaying in mobile view please.

Website: https://www.rebeccagaunt.co.uk/portfolio

The titles that wrap onto two lines aren't displaying centrally for some reason?

Secondly, I introduced some script to autoplay through the items, with background image changing each time, which works great in desktop but doesn't seem to work in mobile view.

Thanks in advance for any help with this.

It looks fine. Did you solve?

Hi @RGCreative

How did you achieve the autoplay in your portfolio section? would love something like this as well!

Also, did you find a solution to the mobile view? I'm currently facing the exact same problem and can't seem to find a solution.. 

Hi @CorinnaR Sorry for the slow reply.

This is the code injection I found for the autoplay. Hope that works!

 

<!--beyondspace autoplay Hover Portfolio start-->
<script>
  (function(){
    window.addEventListener('load', () => {
      setTimeout(() => {
        beyAutoPlayPortfolio(3000); // change the speed of transition
      }, 3000); // 3000 milliseconds (3 seconds) delay
    });
  })();

  function beyAutoPlayPortfolio(e) {
    let t = document.querySelectorAll(".portfolio-hover-items-list > li");
    if (t.length > 1) {
      let o = new Event("mouseenter"),
          l = null,
          r = function () {
            let i = document.querySelector('.portfolio-hover-item[data-active="true"]').closest("li").nextElementSibling;
            i || (i = t[0]), i.querySelector("a").dispatchEvent(o), l = setTimeout(r, e);
          };
      r();
      t.forEach(e => {
        e.querySelector("a").addEventListener("mouseenter", function (e) {
          e.isTrusted && clearTimeout(l);
        });
        e.querySelector("a").addEventListener("mouseleave", function (e) {
          e.isTrusted && r();
        });
      });
    }
  }
</script>
<!--beyondspace autoplay Hover Portfolio end-->