Jump to content

Testimonial custom arrows – Desktop & Mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hi there,

I'm looking to add padding around the arrow icon in the buttons in my testimonials section, so that there's more space between the arrow icons themselves and the border of each button.

I'd like to make the background behind the arrow drawing solid #FFF7F3 that changes to #FFE79A on hover. There should be a 1px border in black, with slightly rounded corners. I'd then like to replicate this in mobile.

I'm almost there! Please can you help? Thanks.

Edited by StudioEvka
Link to comment
  • Replies 9
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

On 2/28/2024 at 8:01 PM, StudioEvka said:

Hi there,

I'm looking to add padding around the arrow icon in the buttons in my testimonials section, so that there's more space between the arrow icons themselves and the border of each button.

I'd like to make the background behind the arrow drawing solid #FFF7F3 that changes to #FFE79A on hover. There should be a 1px border in black, with slightly rounded corners. I'd then like to replicate this in mobile.

I'm almost there! Please can you help? Thanks.

#1. Use this CSS code

section[data-section-id="65df26a892d53d138c13d43d"] .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-size: 50px !important;
}

#2. I see you solved?

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

image.thumb.png.df7851c702fcc24d5e99cfe2b1b5606a.png

So I've managed to make the arrow backgrounds solid and resize the arrows using your code. How to I make it so the arrow backgrounds change colour on hover?

Also how to I replicate this in mobile? (obviously without the hover) Thank you 🙂

Link to comment
On 3/5/2024 at 4:13 PM, StudioEvka said:

image.thumb.png.df7851c702fcc24d5e99cfe2b1b5606a.png

So I've managed to make the arrow backgrounds solid and resize the arrows using your code. How to I make it so the arrow backgrounds change colour on hover?

Also how to I replicate this in mobile? (obviously without the hover) Thank you 🙂

You can use this CSS code

section[data-section-id="65df26a892d53d138c13d43d"] {
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area:hover {
    background-color: #f1f !important;
}
.mobile-arrows {
    display: none !important;
}
.desktop-arrows {
    display: flex !important;
}}

 

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
On 3/8/2024 at 5:58 PM, tuanphan said:

You can use this CSS code

section[data-section-id="65df26a892d53d138c13d43d"] {
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area:hover {
    background-color: #f1f !important;
}
.mobile-arrows {
    display: none !important;
}
.desktop-arrows {
    display: flex !important;
}}

 

You can remove this code, I will check it again

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
  • 3 weeks later...
  • Solution
On 4/4/2024 at 11:41 PM, StudioEvka said:

@tuanphan OK I've removed the code again – let me know when you've had a chance to revisit. Thanks!

With mobile, use some code like this

@media screen and (max-width:767px) {
    button[class*="arrow-button"] svg {
    display: none !important;
}
[class*="arrow-icon-background"] {
        background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
    background-color: transparent !important;
}
button[class*="arrow-button--left"] [class*="arrow-icon-background"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
}
button[class*="arrow-button--right"] [class*="arrow-icon-background"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
}
}

 

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

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.