Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
bshoop

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

Question

12 answers to this question

Recommended Posts

  • 5

I found something like this in another answer and it works:


.sqs-gallery-design-strip img { margin-right: 2px; }

Edited by bshoop

Share this post


Link to post
  • 2

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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

I'm not sure if it does since I use it on multiple sites and it works like a charm. But found one of the solutions.


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

Share this post


Link to post
  • 0

I went to Design/Custom CSS and added this code into the box:

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

You can then change the 10px to whatever suits.

Hope that helps!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...