gcerceo

Use this
/* Mobile-Portfolio title under image */ @media screen and (max-width:991px) { div#gridThumbs { display: block !important; } .portfolio-text { opacity: 1 !important; position: relative !important; } .portfolio-text * { font-size: 10px !important; line-height: 20px !important; } }  

Your original code worked great. Not sure why it was giving me errors at first. Thank you @tuanphan you're amazing!
 

I am trying to this also. 
 
I have hover:follow cursor on desktop, and would like to force gallery:simple on mobile + have the portfolio titles underneath the images. 
 
www.grahamcerceo.com

Use this new code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function() { $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(1) a').attr('href','https://www.grahamcerceo.com/brand-refinement'); $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(2) a').attr('href','https://www.grahamcerceo.com/brokermint-baddies'); $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(3) a').attr('href','https://www.grahamcerceo.com/in-house-video'); $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(4) a').attr('href','https://www.grahamcerceo.com/customer-stories'); $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(5) a').attr('href','https://www.grahamcerceo.com/how-it-works-refresh'); }); </script>  

Add this to Settings > Advanced > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function() { $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(1)').attr('href','https://ebay.com'); $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(2)').attr('href','https://abc.com'); $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(3)').attr('href','https://facebook.com'); $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(4)').attr('href','https://instagram.com'); }); </script> Replace example urls with your desired url

This is possible with some code. Do you still need help?

If you share link to your site, we can help easier
You mean change to 4 custom urls?

Change your code to this
<img src=""> <ul class="t-list"> <li class="item" data-image="https://ct112013.files.wordpress.com/2013/07/pasteeel.jpg">WOMAN</li> <li class="item" data-image="https://i.pinimg.com/736x/1a/e9/ff/1ae9ff68eddb75113cc797f1324515b9--color-coordination-reiss.jpg">MAN</li> <li class="item" data-image="http://www.todaysparent.com/wp-content/uploads/2014/02/Mint1.jpg">KID</li> </ul> <style> ul.t-list { list-style: none; padding: 0; margin: 0; position: relative; } ul.t-list li { font-family: "Belleza", sans-serif; position: relative; font-size: 80px; text-align: center; -webkit-text-stroke: 1px black; color: transparent; margin-bottom: 40px; z-index: 1; } .t-list img { position: absolute; width: 30%; object-fit: contain; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; z-index: 10; } </style> <script> const items = document.querySelectorAll('.item') const image = document.querySelector('.t-list img') items.forEach((el) => { el.addEventListener('mouseover', (e) => { imageData = e.target.getAttribute('data-image') console.log(imageData) e.target.style.zIndex = 99 image.setAttribute('src', imageData) }) el.addEventListener('mousemove', (e) => { image.style.top = e.clientY + 'px' image.style.left = e.clientX + 'px' }) el.addEventListener('mouseleave', (e) => { e.target.style.zIndex = 1 image.setAttribute('src', '') }) }) </script>  

to set style based on the breakpoint, you can use the syntax
@media only screen(max-width: 767px) { /*Your mobile style*/ }

Yes. No way. Need to do this for each page. If you share link to page where you want to do this & describe the problem, we can help easier