Slideshow and Product Swiper have overlapping arrow buttons

Solved
Highlighted
New Member
2 0 1

I am using Avenue theme, in each section of the homepage slideshows and product swipers, there are 2 arrows overlapping on each other (as image shown below), where can I locate them in the theme.scss.liquid?

How can I fix that next button arrow error?

Theme: Avenue

Link: www.seoulrecipe.com

 

Homepage Slideshow

Screenshot 2020-06-16 at 3.42.25 PM.png

Homepage Product Slider

Screenshot 2020-06-16 at 3.41.45 PM.png

Thank you in advance for your help!

0 Likes
Highlighted
Shopify Partner
27 4 5

This is an accepted solution.

you will find this code in the css file

{

...

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23007aff'/%3E%3C/svg%3E");
...
)
 
change it to :
 
{
...
background-image: none !important;
...
}
 
 
css-fix.JPGlove.JPG
-------------------------------------------------------------------------------------------------------
Hey buddy, I started freelancing..
Hire me through Upwork,
I need your support and rating..
click here: MaazS
1 Like
Highlighted
New Member
2 0 1

Replacing the code doesn't work, BUT I typed a new line under it with your suggested code worked:

 

.swiper-button-next {
background-image: none !important;
}

 

Thank you MaazB :D

1 Like