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

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


bshoop
Go to solution Solved by bshoop,

Question

  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

12 answers to this question

Recommended Posts

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

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
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!

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...