Jump to content

Rounded Corners on Custom Stacked Gallery

Recommended Posts

42 minutes ago, holahannah said:

Hello, 

I'm having trouble custom styling a Stack Gallery in Squarespace. It's nearly how I want it, but I'm trying to get the border on the right side to be rounded, like the left side. Is this possible?

Here's a link, and it's under the title 'Gallery'. 
https://beckrocchi.squarespace.com/wedding-galleries/ainsley-and-stu
password: beckrocchi

Any suggestions, appreciated! Many thanks

Screenshot 2024-04-29 at 8.23.36 pm.png

It loook like 

 

44 minutes ago, holahannah said:

Hello, 

I'm having trouble custom styling a Stack Gallery in Squarespace. It's nearly how I want it, but I'm trying to get the border on the right side to be rounded, like the left side. Is this possible?

Here's a link, and it's under the title 'Gallery'. 
https://beckrocchi.squarespace.com/wedding-galleries/ainsley-and-stu
password: beckrocchi

Any suggestions, appreciated! Many thanks

Screenshot 2024-04-29 at 8.23.36 pm.png

I check that it works properly

Have you figured it out?

image.thumb.png.76733d3ba9c4abee7e06cb66bf8edc68.png

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

Hi @Beyondspace
Unfortunately not. While the images themselves have the rounded corners, because the last image in the slider goes beyond the slider margin, it has a straight edge - not rounded corners like I want. Attached is a screenshot of what I mean. 

Thanks

Screenshot 2024-05-01 at 4.09.24 pm.png

Link to comment

Hey @holahannah -

super cute site!

What I would normally suggest is that you add border radius to the gallery container, but since there is the scrollbar injected inside this container the gallery container isn't just holding the images

e.g.,

.sqs-gallery-container.sqs-gallery-block-stacked {
    border-radius: .625rem;
    overflow: hidden;
}

 

It seems that since the .js to add the scroll bar keeps it in the gallery container, you can't adjust the lower corners of the container to show the same radius. Not sure how much control you have over the slider placement here to make this adjustment yourself. 

 

IMO - halving the image like this does indicate to the user that there's more on the carousel, so might not be the worst thing.

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.