Banner Slideshow Mobile Image Padding

I am looking to add padding around these Banner Slideshow slides on mobile with CSS , and I can't seem to figure it out!  Attached below I provided images of how it look.

Mobile

s.

Desktop

Can you share your website URL?

3 minutes ago, Ziggy said:

Can you share your website URL?

Yes, I can!
Website URL

3 minutes ago, Ziggy said:

Try this in Custom CSS:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 8px;
  }
}

Thank you for your response! The margin shows up in the editing window but not on an actual mobile device. This was the issue I was having.

While Editing

On Device

The CSS doesn't appear to have been saved as I can't see it in the code on your website, did you remove it?

3 hours ago, Ziggy said:

The CSS doesn't appear to have been saved as I can't see it in the code on your website, did you remove it?

I added it back. Let me know what you see.

Hmm, not sure why that wasn't excluding the other elements, try one of these:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slides {
    width: 98%;
  }
}

Or this:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 24px;
  }
}

5 minutes ago, Ziggy said:

Hmm, not sure why that wasn't excluding the other elements, try one of these:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slides {
    width: 98%;
  }
}

Or this:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 24px;
  }
}

Yeah, it's the same result. When I include IMG it created the margin but the images are clipped.

Do you have any other style code that might be overriding these tweaks?

43 minutes ago, Ziggy said:

Do you have any other style code that might be overriding these tweaks?

Thank you! That seemed to work. I subtracted all code and implemented what you suggested.

While Editing and Mobile

Thank you for your assistance!

1 hour ago, Ziggy said:

Do you have any other style code that might be overriding these tweaks?

One last thing, do you happen to know the code to be able to change the height for Banner Slideshow for mobile?

Can you mark my post as the solution and give it a like?

Try this CSS:

@media screen and (max-width:767px) {
  .user-items-list-item-container[data-section-id="663149d7ee4b47248ba89534"] ul {
    min-height: unset !important;
  }
}

Thank you!

2 minutes ago, Knoxx said:

Thank you!

Pleased to help!

@Ziggy — Hi! I'm having the same problem with my mobile banner slideshow & have tried your custom CSS above. It seems to work at first, then as soon as I refresh it goes back to no gap between the slides: 

site: octagon-horse-l653.squarespace.com
pswd: huddle

Hello! I'm having trouble getting my banner slideshow section to display adjacent slides on mobile with a small gap between slides. I added a solution from this post to my custom CSS, which will work at first then as soon as I refresh the page the updates disappear.  

• show adjacent slides ✔
• add 16px gap btw slides (mobile only, desktop is correct at 24px) ❓
• increase width of each slide = 80% of viewport width ❓

site: octagon-horse-l653.squarespace.com
pswd: huddle