Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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;
}}

Carousel Image Border (bottom gaps).png

CSS - clickable carousel image.png

Link to comment
  • Replies 4
  • Views 410
  • Created
  • Last Reply

Top Posters In This Topic

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;
}}

Carousel Image Border (bottom gaps).png

CSS - clickable carousel image.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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;

}}

 

 

Link to comment
  • Solution

Add this code under (Design > Custom CSS)

.user-items-list-item-container[data-section-id="64025f30663dba61c04625a5"] {
.list-item-content {
    height: 0px;
}
.user-items-list-carousel__media-container {
    margin-bottom: 0px !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.