Styling a testimonial block on desktop and mobile

Hello,

I am trying to change the typography style of the testimonial block on my homepage but am struggling in some areas. I'd like:

• the title to be in a heavier weight
• the quote to be in a lighter weight
• when viewed on mobile for quote to be even positioned between the title and the arrows

I have tried to change this in the CSS but haven't had any luck. I think (but could be wrong) that some of the styling is in javascript which is why I can't change it.

https://bamboo-rabbit-99gt.squarespace.com/config/
pw: !(cX3Ly@$323cC(

Thanks!

Hey again!

• the title to be in a heavier weight: You are so close! The code is correct, you just need to make the font weight heavier for this font to then be bolded - like below:

section[data-section-id="64a686d5356efe37ea8a0cb9"] .list-section-title p {
    font-weight: 600;
}

 

• when viewed on mobile for quote to be even positioned between the title and the arrows: this code is affecting mobile 

section[data-section-id="64a686d5356efe37ea8a0cb9"] .slideshow-holder ul {
    max-height: 60vh
}

So if you wrap it in a media query that will solve the issue:
@media only screen and (min-width: 768px) {
section[data-section-id="64a686d5356efe37ea8a0cb9"] .slideshow-holder ul {
    max-height: 60vh
}
}

• the quote to be in a lighter weight: this one I was having a hard time with, but I think it's because the font "Agrandir" is a heavy font. So I think you need to change the font family to the lighter version you added in in your CSS

section[data-section-id="64a686d5356efe37ea8a0cb9"] h2.list-item-content__title {
    font-family: Agrandir-reg;
}

33 minutes ago, ErinFitzsimmons said:

Hey again!

• the title to be in a heavier weight: You are so close! The code is correct, you just need to make the font weight heavier for this font to then be bolded - like below:

section[data-section-id="64a686d5356efe37ea8a0cb9"] .list-section-title p {
    font-weight: 600;
}

 

• when viewed on mobile for quote to be even positioned between the title and the arrows: this code is affecting mobile 

section[data-section-id="64a686d5356efe37ea8a0cb9"] .slideshow-holder ul {
    max-height: 60vh
}

 

So if you wrap it in a media query that will solve the issue:
@media only screen and (min-width: 768px) {
section[data-section-id="64a686d5356efe37ea8a0cb9"] .slideshow-holder ul {
    max-height: 60vh
}
}

 

• the quote to be in a lighter weight: this one I was having a hard time with, but I think it's because the font "Agrandir" is a heavy font. So I think you need to change the font family to the lighter version you added in in your CSS

section[data-section-id="64a686d5356efe37ea8a0cb9"] h2.list-item-content__title {
    font-family: Agrandir-reg;
}

Oh hey!

Thanks so much for coming back to me so quickly! 

The font-weight issue is sorted now. I completely forgot I two types of Agrandir there!

The mobile issue isn't quite right yet. The quote is now positioned centrally but there is a large space above and below it. How do I reduce that please?

That sorted that! Sorry, one last thing...

How do I make the quote text smaller when viewed on mobile? I'm trying this but it's not working:

@media only screen and (max-width: 767px) {
  section[data-section-id="64a686d5356efe37ea8a0cb9"] h2.list-item-content__title {
font-size: 23px;
    }    
}

I saw you put the !important tag on and it's working now!