MelitaM Posted July 3 Share Posted July 3 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. Link to comment
Lesum Posted July 4 Share Posted July 4 @MelitaM Can you share your site URL for context? 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
MelitaM Posted July 4 Author Share Posted July 4 Yes this is my website: https://www.baylysfarm.co.nz/ The sliders can be found on the following two pages: https://www.baylysfarm.co.nz/wedding-package-information https://www.baylysfarm.co.nz/bay-of-islands-destination-wedding Link to comment
Lesum Posted July 4 Share Posted July 4 @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
MelitaM Posted July 4 Author Share Posted July 4 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? Link to comment
tuanphan Posted July 6 Share Posted July 6 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? #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 #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
MelitaM Posted July 8 Author Share Posted July 8 (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. Edited July 8 by MelitaM Link to comment
Solution Lesum Posted July 8 Solution Share Posted July 8 (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 July 8 by Lesum tuanphan 1 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
MelitaM Posted July 8 Author Share Posted July 8 Sorry I just saw that you said Footer. I have added it there and it is working. Thanks very much for your help 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment