Testimonial custom arrows – Desktop & Mobile

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.

Can you share link to page where you use testimonials section, we can check problem easier

Of course! My bad https://www.studioevka.com/ near the bottom

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?

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 🙂

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

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

Thanks so much – almost there! I would like these styled arrows to still sit under the quote source and centred, in mobile. So same layout as before, but styled like we have it here.

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

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