ratkaj Posted February 18, 2022 Posted February 18, 2022 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 }
Caroline_Smith Posted February 18, 2022 Posted February 18, 2022 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; } ratkaj 1 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
ratkaj Posted February 18, 2022 Author Posted February 18, 2022 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.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment