Testimonial font slider code not showing up live on mobile

I have tried 2 different codes (purple & green below) to change the font for the word testimonials to proxima nova.

The 1st one works on desktop but not live on iphone as pictured. 

/* Testimonial slider title font */
.user-items-list .list-section-title{
  font-size: 20px !important;
  font-family: proxima nova !important;}

I tried a new code here, just to target the specific section, but it is still not working. 

section[data-section-id="66ba162c83a676735b68e0d5"] user-items-list .list-section-title{
  font-size: 20px !important;
  font-family: proxima nova !important;}

Thank you kindly in advance.

You are missing a period, see here:

Thank you

I now have these in the code, but it is still not working...

/* Testimonial slider title font */
.user-items-list .list-section-title{
  font-size: 20px !important;
  font-family: proxima nova !important;}

section[data-section-id="66ba162c83a676735b68e0d5"] .user-items-list .list-section-title{
  font-size: 20px !important;
  font-family: proxima nova !important;}

https://www.nicolacross.com/home

Try this instead:

.user-items-list-item-container[data-section-id="66ba162c83a676735b68e0d5"] .list-item-content__title {
  font-family: 'proxima-nova';
}

Thank you, that doesn't work for me as I want the "testimonials" title to be in proxima-nova

But the "quote" writing in gold & freight big pro.

That code was affecting the "quote" section too

Sorry, we're just using language differently! I was thinking testimonial and source, compared with quote and testimonial.

This is the selector for the name (source / testimonial):

.user-items-list-carousel .list-item-content__description p

Hello, thank you, I am a bit confused now.
I have tried implementing the most recent code you sent me within full code, but I am not sure. (It seems to be targeting the content in the Name, E.G. "Sally"

This original one I had seems to work for desktop:
// Testimonial slider title font//
.user-items-list .list-section-title{
  font-size: 20px !important;
  font-family: proxima nova !important;}

Please can you send me the full code for mobile? I have added clearer notes to the screenshots, so please look at them.

The word I want to change is "Testimonials"

The name of that section is:
section[data-section-id="66ba162c83a676735b68e0d5"]

(I'm using the extension "Find Squarespace ID")

Thank you kindly

Thank you kindly, that worked 😊

It looks like you're trying to apply a custom font to the "Testimonials" section on both desktop and mobile devices. The issue might be due to the specificity of your CSS selectors or the way the font is being applied on different devices. Here's a refined approach you can try:

CSS Code:

Key Points:

1. Font Import: Make sure the Proxima Nova font is properly imported. If you're hosting the font locally or using a different method to load it, adjust the @import URL accordingly.

2. Selector Specificity: The second selector targets a specific section using the data-section-id and should ensure that the font is applied only to that section. The addition of !important should help override any conflicting styles.

3. Mobile Considerations: Sometimes, mobile devices handle fonts differently. Ensure that the font is fully loaded before applying the style, and check for any media queries or CSS that might override your styles on mobile.

4. Testing: After applying the above CSS, clear your cache and test on both desktop and mobile devices to see if the issue is resolved.

If it still doesn't work, you might want to inspect the elements on your iPhone using a browser developer tool to see if any other styles are conflicting with your custom font settings.