Jump to content

Styling a testimonial block on desktop and mobile

Go to solution Solved by ErinFitzsimmons,

Recommended Posts

Posted

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!

Posted

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;
}

Posted
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?

  • Solution
Posted

I would change up the margin for mobile only so something like this below. You could change the first margin value (it's the top & bottom margin) even more if you wanted.

But something to note about the slider is that the sizing is based on your longest title. I normally put the longest quote as my first slide because that's what the height is based around. The quote you have from Camilla is the longest one and it's not first so if you change up the margin and make it less than 30px then make sure to scroll through to see that there is enough space on Camilla's quote since it's the largest and that's what the size is based on!

 

@media only screen and (max-width: 767px) {
  section[data-section-id="64a686d5356efe37ea8a0cb9"] .user-items-list-banner-slideshow .slide-content {
        margin: 30px 0px;
    }
}

Posted

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;
    }    
}

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.