Banner buttons disappear at 749px in Refresh theme

Shopify Discussion
1

Hi. My slideshow banner buttons disappear in the Refresh theme at 749px and below. Can anyone offer a solution as to how I can stop this from happening? Or better yet, how I can make the slides themselves clickable without building a hacky button to cover the slide and then making it transparent?

TIA.

2

Never mind. I found JS to make it all better, Still a little funky, but functional.

const divA = document.querySelector(‘#YourSlideTemplateHere-SlideNumberHere’);
divA.addEventListener(‘click’, function() {
window.location.href = ‘/your/linkhere’;
});

3

I created a separate JS file named custom.js and linked it through theme.liquid placing this this code {{ ‘custom.js’ | asset_url | script_tag }} right before

const slideOne = document.querySelector(‘#Slide-template–Your Slideshow ID Goes Here-1’);
slideOne.addEventListener(‘click’, function() {
window.location.href = ‘/slideOneURL’;
});

const slideTwo = document.querySelector(‘#Slide-template–Your Slideshow ID Goes Here-2’);
slideTwo.addEventListener(‘click’, function() {
window.location.href = ‘/slideTwoURL’;
});

Rinse and repeat for however many slides you have making sure you don’t use a const more than once.

I also added code to my custom.css file to change the cursor to a pointer for each slide and linked it through theme.liquid by placing this code {{ ‘style.css’ | asset_url | stylesheet_tag }} right before

#Slide-template–Your Slideshow ID Goes Here-1:hover {
cursor: pointer;

}

#Slide-template–Your Slideshow ID Goes Here-2:hover {
cursor: pointer;

}

Rinse and repeat for however many slides you have…

Yeah, it’s a bit clunky because you have to do this for each slide but t works.