magneticnorth Posted May 31, 2022 Share Posted May 31, 2022 Site URL: https://mahalavi.squarespace.com web password: maha I'm trying to see if there is a way for the List Section to be clickable by image? I know that the other way is to use a List Summary but it doesn't work as well (List section images are more responsive as it is in three columns, whereas the List summary images are not). If anyone has a CSS that could help me to link each of the images here I would be very grateful!!!! Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 You can add a Link in Description or button. Then we can give code to pass link to image (& use code to hide link/button) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
magneticnorth Posted June 1, 2022 Author Share Posted June 1, 2022 Hi Tuanphan! Thanks for your reply. What do I do once I add the links to the button? Link to comment
magneticnorth Posted June 1, 2022 Author Share Posted June 1, 2022 Nevermind I found the code through one of your old responses 🙂 For anyone wondering: First, add buttons, then Use this code (Design > Custom CSS) /* Make list images clickable */ li.list-item { position: relative !important; } .list-item-content__button-container { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } 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; } tuanphan 1 Link to comment
Nhan Posted October 3 Share Posted October 3 On 6/1/2022 at 12:47 PM, magneticnorth said: Nevermind I found the code through one of your old responses 🙂 For anyone wondering: First, add buttons, then Use this code (Design > Custom CSS) /* Make list images clickable */ li.list-item { position: relative !important; } .list-item-content__button-container { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } 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; } Is there a way to only make this change for a specific item section alone? I found a section id something like this, section[data-section-id="651bf9672771553120576277"] But I don't know how to adjust to code to only apply the "hide button"-change to that section alone. Thanks! Link to comment
tuanphan Posted October 6 Share Posted October 6 On 10/3/2023 at 8:59 PM, Nhan said: Is there a way to only make this change for a specific item section alone? I found a section id something like this, section[data-section-id="651bf9672771553120576277"] But I don't know how to adjust to code to only apply the "hide button"-change to that section alone. Thanks! Change code to this section[data-section-id="651bf9672771553120576277"] { li.list-item { position: relative !important; } .list-item-content__button-container { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } 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; } } Nhan 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment