Jump to content

Change Testimonial Slider from Title Case to Sentence Case

Go to solution Solved by Lesum,

Recommended Posts

Hi there,

I have a couple of text-only testimonial sliders on my website. Currently these sections are pulling through my website heading font, which is Title Case. For the Testimonial Sliders only I would like this font to be Sentence Case in order to make it easier for people to read. Is is possible to adjust the font to sentence case in these sections only? The sections on my website that I am referring to are: 

- section[data-section-id="664ac2875c82dd41980ce806"]

- section[data-section-id="6679ed582d03a65fc27c4d33"] 

See screenshots attached.

Thanks in advance.

Screenshot 2024-07-04 at 11.17.29 AM.png

Screenshot 2024-07-04 at 11.22.14 AM.png

Link to comment

@MelitaM Hi! Add this code under Website > Pages > Website Tools > Custom CSS

section[data-section-id="6679ed582d03a65fc27c4d33"] h2.list-item-content__title {
	text-transform: unset !important;
}

section[data-section-id="664ac2875c82dd41980ce806"] h2.list-item-content__title {
	text-transform: unset !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Amazing, thank you! That has worked.

Do you know if there is a way to add more space to the left and right of the copy on the mobile version - see screenshot attached?

And would there be a way to add line breaks within the copy?

IMG_1025.PNG

Link to comment
On 7/4/2024 at 8:42 AM, MelitaM said:

Amazing, thank you! That has worked.

Do you know if there is a way to add more space to the left and right of the copy on the mobile version - see screenshot attached?

And would there be a way to add line breaks within the copy?

IMG_1025.PNG

#1. You can use CSS code like this

@media screen and (max-width:767px) {
section[data-section-id="6679ed582d03a65fc27c4d33"] h2.list-item-content__title {
    max-width: calc(~"100% - 60px") !important;
    margin: 0 auto !important;
}
}

Code for this page: https://www.baylysfarm.co.nz/wedding-package-information

image.png.66c46b4e26ea863f93fd1f25e85b75e4.png

#2. To add line break, you can use br tag when enter text, something like this

"We got married at Baylys' Farm <br/>after going to a friends wedding there a few years ago. We had the most incredible day there and couldn't have picked a better location for our wedding. The Baylys' Farm team were excellent with their communication, <br/>and very helpful at answering any questions we had, including having a few phone calls to talk in person. They also were able to give us advice on the order of the day and gave us a great list of vendors to work with. We would definitely recommend Baylys' Farm <br/>to anyone, all of our guests commented on how incredible it was there.

then use this code to Code Injection > FOOTER to force br work

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

Thank you! I have just tried this code but Squarespace has said that there is a syntax error on the first line? (which is <script). Thanks. 

Screenshot2024-07-08at3_34_25PM.png.266017fad33cc4a08d761d2185c13cdf.png

Edited by MelitaM
Link to comment
  • Solution
Posted (edited)

@MelitaM Hi! You've to add the code @tuanphan shared under Website > Pages > Website Tools > Code Injection > Header

The <script></script> part of the code

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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.