How to make the whole item clickable in lists in Squarespace

Enable buttons and set links

First of all, we need to enable buttons and set the links on that buttons.

Now, if you click the button, you’ll see that it’s working properly, taking you to the linked page. Clicking on images or text does nothing though. Let’s fix it with some code — using :before pseudo-element which is a common way making things clickable with CSS.

Apply CSS

Add this code to Pages › Website Tools › Custom CSS. You can also apply per section if needed.

.list-item {
  position: relative;
}

/* we need to make this static so link covers the whole element */
.list-item-content__button-container {
  position: static !important;
}

.list-item a:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

Remove the button

It’s not recommended to remove the link because of accessibility reasons, but we still can do this:

coming soon