Jump to content

How do I add padding between images in a slider gallery?

Go to solution Solved by bshoop,

Recommended Posts

  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

Multiple ways to do this, but heres a simple way.

.sqs-gallery-design-strip-slide .sqs-wrapper img:not(:last-child) {
    padding-right: 10px; 

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment
  • 6 months later...

The answers here work to add space between the images. But I’ve found that when you click the ’Next’ button, the position that the next image slides to is offset by the same amount of pixels you’ve added to the margin. So if you’d like a lot of space between images (lets say 40px), your gallery starts to look out-of-whack by the second or third image.

Has anybody come across a solve for this? Whatever function the ’Next’ button runs on seems to account for the width of each image, but not the extra margin width you’ve added. Is there some way to force it to account for the extra pixels?

Edited by Good Fortune Collective
Link to comment
  • 3 months later...
  • 2 months later...
  • 11 months later...
  • 8 months later...

bshoop's worked for me... thanks.

Nick Scola's worked too but only after I removed the "-slide" that comes after "strip" like this:.sqs-gallery-design-strip .sqs-wrapper img:not(:last-child) { padding-right: 15px; }

Link to comment
  • 1 year later...
  • 2 weeks later...
  • 2 years later...
  • 2 years later...

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.