Need help adding padding and borders to 7.1 Gallery Slideshow Reel images

Site URL: https://sailfish-turquoise-4mac.squarespace.com/

Hi there!

I'm currently wrapping up a website design for a client and am running into an issue applying both padding and image borders to the Gallery Slideshow Reel in 7.1. Right now, I'm able to apply padding to space out each image and the slideshow as wireframed, but when borders are applied they aren't directly on the image – rather, they're outside of the bounds of the padding. 

I've attached screenshots here of my current view using the below CSS, and the original website wireframe of the desired look for the slideshow. Any troubleshooting tips for what I should target with my CSS would be super helpful – thanks so much! 

Current code: 

.gallery-reel-item img {padding: 15px}

1 hour ago, KwameAndCo said:

You'll need to share the password too.

EDIT:

As much as I'd like to encourage the good practice of putting the password with help requests, looking at the line of CSS you shared, I realised what you were using.

You can watch the video below or just copy the CSS if you don't care for the logic.

 

Oh wow, thank you so much – this is incredibly helpful and I appreciate you taking the time out of your day to record this tutorial! Targeting the image wrapper makes perfect sense now, as well as the additional steps that you shared.

Apologies about not sharing the password, I always forget 🤦‍♀️ Thank you again! 

 

1 hour ago, lindsayscholz said:

Apologies about not sharing the password, I always forget 🤦‍♀️ Thank you again! 

No worries. It happens! I could tell you meant to hahah.

If it's answered things, please mark the question as answered so that other members can easily find it 🙂

Hi @KwameAndCo 

thank you for the tutorial, did you find a solution for the jerky animation for the first item ?