Make Gallery Image Clickable with Border (bottom border has a gap)

Hi there,

I have been playing with the CSS for some time - when I add the clickable gallery image css (this problem occurs).

I'm trying to achieve two things:

• border around the gallery images
• make images clickable (css is a hidden button )
• also have page code injection (automate carousel scroll)

Any help to make the border not gap at the bottom of the gallery image?

THANK YOU!

CSS

/* Gallery Images clickable & border */
section[data-section-id="64025f30663dba61c04625a5"] {
li.list-item {
    position: relative !important;
    border: 1px solid black;
}
.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;
    border: none !important;
}}

21 hours ago, Midnighthex_ said:

Hi there,

 

I have been playing with the CSS for some time - when I add the clickable gallery image css (this problem occurs).

I'm trying to achieve two things:

• border around the gallery images
• make images clickable (css is a hidden button )
• also have page code injection (automate carousel scroll)

Any help to make the border not gap at the bottom of the gallery image?

THANK YOU!

 

CSS

/* Gallery Images clickable & border */
section[data-section-id="64025f30663dba61c04625a5"] {
li.list-item {
    position: relative !important;
    border: 1px solid black;
}
.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;
    border: none !important;
}}

Can you share your URL so I can take a look?

Hi there,

Yes it's https://midnighthex.com/home-inconstruction

I used this code to hide the buttons inside the carousel images, issue is that padding left at the buttom where I want the 1px border.

/* List carousel clickable */

.user-items-list-item-container[data-section-id="6319dfbecb1930144b4dd9e3"] {

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;

}

.list-item-content__button-container {

    position: static !important;

}}