Text cut off / overlapping on testimonial slider on mobile

Site URL: https://www.deliciouscreations.co.uk

Hi

I have noticed that the text on the homepage testimonial slider on my clients site, populated from blog entries, is cutting off slightly on the right hand side - there are 10 testimonials and it starts to happen at number 4 onwards, and also on the last few the text is slightly overlapping onto the next one. Looks fine on desktop.

Here is the complete coding for the slider:

/*TESTIMONIAL SLIDER - landing page*/
.sqs-gallery-design-carousel .sqs-gallery-controls .next,
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
 display: block;
 float: right;
 position: relative;
 top: auto;
 left: -15px;
 right: 15px;
 bottom: auto;
 margin: 0 0 15px 0;
 padding: 0;
 background-color: transparent;
 color: inherit !important;
 font-size: 16px;
 line-height: 16px;
 cursor: pointer;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
 font-family: 'squarespace-ui-font';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 content: "\E003";
 text-align: center;
 display: inline-block;
 vertical-align: middle;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
 font-size: 64px;
 width: 64px;
 height: 64px;
 line-height: 64px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
 font-size: 32px;
 width: 16px;
 height: 32px;
 line-height: 32px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
 margin-right: 10px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
 font-family: 'squarespace-ui-font';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 content: "\E000";
 text-align: center;
 display: inline-block;
 vertical-align: middle;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
 font-size: 64px;
 width: 64px;
 height: 64px;
 line-height: 64px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
 font-size: 32px;
 width: 16px;
 height: 32px;
 line-height: 32px;
}
.summary-carousel-pager .previous {
 position: absolute !important;
 left: -15% !important;
 right: inherit !important;
 top: 45% !important;
}
.summary-carousel-pager .next {
 position: absolute !important;
left: inherit !important;
 right: -15% !important;
 top: 45% !important;
}

@media screen and (max-width: 767px) {
.summary-carousel-pager .previous {
 position: relative !important;
 left: -15% !important;
 right: inherit !important;
 top: 25% !important;
}
.summary-carousel-pager .next {
 position: relative !important;
left: inherit !important;
 right: 15% !important;
 top: 25% !important;
  }}
@media screen and (max-width: 767px) {
.summary-carousel-pager .previous {
 position: relative !important;
 left: -15% !important;
 right: inherit !important;
 top: 25% !important;
}
.summary-carousel-pager .next {
 position: relative !important;
left: inherit !important;
 right: 15% !important;
 top: 25% !important;
  }}

.summary-excerpt p {
  font-size: 19px !important;
  line-height: 1.6em !important;
  font-style: italic;
  letter-spacing: 0.13;
  text-align: center !important;
  color: hsl(34, 3%, 54%);
}

.sqs-gallery-design-carousel {
  background: hsl(48, 87%, 92%);
  max-width: 700px;
  max-height: 1000px;
  margin: 0 auto;
  position: relative;
    padding: 40px;
}

/*Reduce Testimonial Slider thumbnail size*/
.summary-thumbnail img {  
  max-width: 15%;
  max-height: 15%;
margin: auto;
 }
.summary-thumbnail-container { 
  pointer-events: none !important; 
}

@media screen and (max-width: 767px) {
 .sqs-gallery-design-carousel {
 margin: 0 auto;
  position: relative;
    padding: 40px;
    min-height: 260px;
  }}

Any help very much appreciated.

Just wondering if anyone can help before I drown in coding tweaks! Thanks

Can you turn off autoplay? We can check easier

Hiya, yes sure, do I need to do that in the code injection coding? Thanks

On 2/19/2021 at 9:38 PM, Aitch said:

Hiya, yes sure, do I need to do that in the code injection coding? Thanks

 

How did you add testimonial slider? I guess you can edit...

Hi, thanks for replying, I can edit the autoplay in code injection. The site has only recently gone live so I just need to be careful when I do it, as it will have the most traffic this week. 

I did tweak the code slightly - below - and it does seem a bit better, in that each comment just fits on mobile, but it is still creeping very slightly to the right, as it scrolls through the testimonials, so if I could fix that, it would be OK.

Thanks.

These are the mobile-specific elements of the coding now. I have a similar slider on another site with no problems, so I wonder if it's something to do with this one having a background block of colour set.

@media screen and (max-width: 767px) {
 .sqs-gallery-design-carousel {
    max-height: 570px;
   width: auto !important!;
     position: relative;
  }}
@media screen and (max-width: 767px) {
 .summary-excerpt p {
padding-right: 22px !important;
   position: relative !important;
   overflow: visible;
   text-align: center !important;
  }}
@media screen and (max-width: 767px) {
 .summary-heading h2 {
   text-align: center !important;
  }}

You can duplicate site & we can test there. If it works, you do on main site.