Jump to content

Testimonial Slides customization --CSS bug problem solving

Recommended Posts

Posted

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
}

Screen Shot 2022-02-18 at 11.23.04 AM.png

Posted

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

 

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Posted
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:

675130979_ScreenShot2022-02-18at1_52_38PM.thumb.png.a90ad18d992f8d4ea5c87b804255ae5a.png

 

There is also a strange mini scroll to the section. 

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.