How to make list gallery images and text clickable--and hide button

Hello!

I'm trying to make the Simple List Gallery images and text below the image linked/clickable to other sections of a website I'm building. But I also need to hide the button. Can someone share how to do this?

I've reviewed a lot of the great information on the forum about this, but none of the CSS seems to work for my situation. I've been able to get the images and text linked--but it's been impossible to hide the button.

Thanks in advance! 

Hi,

This is possible. If you share link to page in screenshot, we can give exact code

@tuanphan — I would love your assistance with this precise inquiry. The website link is: https://dove-nectarine-7dnb.squarespace.com/; the password for entry is rondoCLT23. The list section that I want clickable, while hiding the buttons, is the second section of the homepage (screenshot attached).

Thank you so much for your help 🙂 

On 4/29/2023 at 7:52 AM, BFGS said:

@tuanphan — I would love your assistance with this precise inquiry. The website link is: https://dove-nectarine-7dnb.squarespace.com/; the password for entry is rondoCLT23. The list section that I want clickable, while hiding the buttons, is the second section of the homepage (screenshot attached).

Thank you so much for your help 🙂 

It looks like you changed layout?

If you use List in future, you can add this to Design > Custom CSS

li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}

On 5/1/2023 at 3:05 AM, tuanphan said:

It looks like you changed layout?

If you use List in future, you can add this to Design > Custom CSS

li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}

 

Hi,

First of all, thank you for this code.  I have been using it for a month or so, now.  However (ah, so that's why you're here!), it seems to have stopped working, at least for my site.  Just wondering if it's an isolated issue or a global problem?

I've noticed the default on-hover behaviour for products lists has changed recently.  On Android devices, the alt image is attempting to load in the products list on hover, but it loads a blank.  I've raised this with SS support and proven it not to be my site or device.

Now wondering if a SS back-end change may have affected the list hover behaviour in general.

Would anyone be kind enough to take a look at my site and test, please?

The issue is with the six list items at the bottom of my home page.  On mobile (Android), it seems okay but on desktop (Windows runinng Chrome or Firefox), hovering over the image and title text doesn't respond as a button, as it did previously.  Hovering just below the title does.

Any help would be greatly appreciated. 

Best wishes, James

www.jamesgadbury.com
password: Gadders

Some code overrides this line

change it to this

a.list-item-content__button.sqs-block-button-element {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

(I added !important)

Thank you so much @tuanphan for helping me resolve this, and for pointing out the reason and the required change. 

I have enough information to go back to see what was happening for my own learning / understanding.  I would have been stumped a while.  I use Chrome's dev tools but often it's a bit trial and error.

EDIT: having taken a look at my code, I cannot see that I had added any code to break this and cause the position override.  Is it more likely that a 'behind the scenes' change caused this, and not something I did?  The goal for me is to know when I've done something stupid... which may be too often!

I can see where the override was, and toggle the position override to enable / disable the original issue, but I cannot work out where the override was originating from.

On 2/8/2024 at 7:12 PM, James-Gadbury said:

Thank you so much @tuanphan for helping me resolve this, and for pointing out the reason and the required change. 

I have enough information to go back to see what was happening for my own learning / understanding.  I would have been stumped a while.  I use Chrome's dev tools but often it's a bit trial and error.

EDIT: having taken a look at my code, I cannot see that I had added any code to break this and cause the position override.  Is it more likely that a 'behind the scenes' change caused this, and not something I did?  The goal for me is to know when I've done something stupid... which may be too often!

I can see where the override was, and toggle the position override to enable / disable the original issue, but I cannot work out where the override was originating from.

 

This position: relative, I think from some Animations option, so you try checking in Site Styles > Animations