Testimonial Slides customization --CSS bug problem solving

Site URL: https://academyforlittlelearners.squarespace.com/

Hey Squarespacers -- I have a testimonial slider that I've been able to customize but I've run into an unexpected issue due to the code I wrote. I can't seem to achieve my goal (the images for the testimonials bumping over the top of the cards) without this side effect (the last card showing up on the right.

Any ideas?

Site: https://academyforlittlelearners.squarespace.com/

Password: 1234

CSS (offending code in red below):

////Tesimonial slider////
.white .user-items-list-carousel .list-item[data-is-card-enabled="true"] {
border-radius: 20px !important;
  background-color: #fff !important;
  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
  margin: 5px;
}

.white .user-items-list-carousel .user-items-list-carousel__arrow-icon-background{
  background-color: #39414d !important   
}

.user-items-list-carousel .list-item-content__title{
    font-size: 16px !important;
  line-height: 1.75;
}

.list-item-content__description{
  p{
    color: #45545B;
    font-size: 15px;
          font-weight: 500;
    text-transform: uppercase;
  }
}

.user-items-list-carousel__media-container{
  margin-top: -25%;
}

.user-items-list-carousel__gutter{
    overflow: visible !important;
}
.list-section-title{
  margin-bottom: 50px
}

Hi! I just tested this out on my 7.1 account, and this is what worked for me. Change the offending code to this instead of what you have:

.user-items-list-carousel__gutter {
    overflow-y: visible !important;
    overflow-x: clip;
}

The issue that is causing the scrollbar at the bottom is actually some CSS that is being applied to the top image (the child with the mask). You'll need to change the width of that to be less than 140%.

#block-yui_3_17_2_1_1643987557932_2761 {
    margin-bottom: -20%;
    margin-top: -80px;
    width: 110%;
    z-index: 999;
}

37 minutes ago, Caroline_Smith said:

Hi! I just tested this out on my 7.1 account, and this is what worked for me. Change the offending code to this instead of what you have:

.user-items-list-carousel__gutter {
    overflow-y: visible !important;
    overflow-x: clip;
}

The issue that is causing the scrollbar at the bottom is actually some CSS that is being applied to the top image (the child with the mask). You'll need to change the width of that to be less than 140%.

#block-yui_3_17_2_1_1643987557932_2761 {
    margin-bottom: -20%;
    margin-top: -80px;
    width: 110%;
    z-index: 999;
}

 

Spoke too soon, In safari it's showing like this:

There is also a strange mini scroll to the section.