Reduce Font Size Testimonial Slider in Fluid Engine for Mobile

Site URL: https://trombone-tiger-zfb6.squarespace.com/

Hello!

I'm looking to adjust the size of the font for the testimonial slider section in the new Fluid Engine Builder, for mobile optimization. The font is massive right now.

Any help would be appreciated, 

Thanks 

Cheryl

PW: Jellybeans1234

You mean this?

Yes I do! 

On 8/20/2022 at 8:26 AM, CFlo said:

Yes I do! 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62dee7ac6ef02c27f7e94882"] .slide-content * {
    font-size: 21px !important;
}
}

For some reason, my testimonial 'titles' don't seem to want to change, i've tried all the above but to no avail, any help? : / 

The content description seems to be adjusting fine. I have the testimonial block on various pages across my site, so i'm just using the section data to repeat the style application, here is my code

@media screen and (max-width: 767px) {
section[data-section-id="63fcaf3b6a9d921f53ad978d"], section[data-section-id="63ff7893e414330ac2fc9456"] { 
.list-item-content__description * {
    font-size: 12px!important;
  line-height: 15px!important
}
  }
}

link to site: https://gardenia-chicken-h6l8.squarespace.com/ 
pw: demo

The testimonials banner slideshow is located at the bottom of the homepage. 

Thank you in advance! N

On 3/3/2023 at 8:00 PM, noblestudio said:

For some reason, my testimonial 'titles' don't seem to want to change, i've tried all the above but to no avail, any help? : / 

The content description seems to be adjusting fine. I have the testimonial block on various pages across my site, so i'm just using the section data to repeat the style application, here is my code

 

@media screen and (max-width: 767px) {
section[data-section-id="63fcaf3b6a9d921f53ad978d"], section[data-section-id="63ff7893e414330ac2fc9456"] { 
.list-item-content__description * {
    font-size: 12px!important;
  line-height: 15px!important
}
  }
}

link to site: https://gardenia-chicken-h6l8.squarespace.com/ 
pw: demo

The testimonials banner slideshow is located at the bottom of the homepage. 

 

Thank you in advance! N

 

Use this

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="63fcaf3b6a9d921f53ad978d"] {
		.slide-content h2.list-item-content__title {
    font-size: 8px !important;
}
.list-item-content__description * {
    font-size: 30px !important;
}
}
}

Wonderful! Thank you @tuanphan

I am having the same issue but while part of the code (the part below) adjusts the name of the person giving the testimonial, neither of the above adjusted the actual testimonial / quote text on mobile (which is huge).

https://krill-panda-563t.squarespace.com/

Password: "0penthevidor"

.list-item-content__description * {
    font-size: 30px !important;

Ú

14 hours ago, Leda_Atomika said:

I am having the same issue but while part of the code (the part below) adjusts the name of the person giving the testimonial, neither of the above adjusted the actual testimonial / quote text on mobile (which is huge).

https://krill-panda-563t.squarespace.com/

Password: "0penthevidor"

.list-item-content__description * {
    font-size: 30px !important;

Use this new code

/* Mobile Testimonials */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="64925c154cb73368bb385186"] li * {
    font-size: 12px !important;
}
}

On 6/23/2023 at 12:01 AM, tuanphan said:

That worked perfectly - thank you!!

Second part of this Testimonial Tweaking - how can I make the Testimonial Sentence Case and the Source / Name for the Testimonial All Caps?

Use this new code

/* Mobile Testimonials */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="64925c154cb73368bb385186"] li * {
    font-size: 12px !important;
}
}

 

I've tried 

/* Target the main testimonial text and convert it to Sentence Case */
.list-item-content__title {
  text-transform: lowercase; /* Convert the text to lowercase */
}

.list-item-content__title::first-letter {
  text-transform: uppercase; /* Capitalize the first letter */
}
 as well as text-transform: none 

But neither of these work

This was answered in another thread in case anyone finds this and has the same issue:

RE: Second part of this Testimonial Tweaking - how can I make the Testimonial Sentence Case and the Source / Name for the Testimonial All Caps?

Code below:

//change case of list sections//

.user-items-list-carousel .list-item-content__title {
  text-transform: none !important;
}

.user-items-list-carousel .list-item-content__description {
  text-transform: uppercase !important;
}

Did you solve or still need help?

On 8/7/2023 at 5:47 AM, tuanphan said:

Did you solve or still need help?

I made a separate post and it was resolved - thank you for checking!