Jump to content

Changing List Section Carousel Title To Custom Font

Go to solution Solved by Ziggy,

Recommended Posts

Site URL: https://areteequestrian.com

 

Site URL: https://areteequestrian.com

Hi there! I was wondering if someone could help me with the code to target the title of this list section carosel, to change the title font to my custom font, which I have CSS set for for the headings. It just didn't change this title, but I know I need to add additional code. I attached a screenshot to show what i mean.

I was also wondering if there was a way for the arrows to go outside of the cards? I don't like them over the testimonial cards... 

Also if there was any way to align the boxes more to the right? I'll attach a second image to kind of show what I'm going for.

Thank you!!

Becky 

Screenshot 2024-09-16 at 9.26.05 AM.png

Screenshot 2024-09-16 at 9.38.46 AM.png

Link to comment

Or I guess my other try was making a gallery, and making the "images" the cards of testimonials that scroll. This works pretty well but I would like 3 to show? and I didn't like the look of half of the "image" showing but I think I fixed that. Here is a picture of what that currently looks like:

 

This does work much better on mobile than the testimonials "section" pre-made template. 

Screenshot 2024-09-16 at 10.03.51 AM.png

Link to comment

Can you share the page this is on?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Use this for the titles:

.user-items-list .list-section-title p {
  font-family: 'Elegant+Season+Serif';
}

You can limit the width of the testimonial section with this code, but it won't work because you have "show adjacent slides" turned on.

.user-items-list-carousel[data-layout-width="inset"] .user-items-list-carousel__slideshow-holder {
    max-width: 1080px;
    margin-right: 0;
}

If you can add this code and change that setting then I can work on another code snippet to move the arrows outside the cards.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? 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.