Hi,
Can you please share the screenshot or the test link. Basically, these arrows are simple CSS borders, even not using the font icon, etc. But if you want to use simple text then just add the following CSS in your style file.
.twentytwenty-left-arrow,
.twentytwenty-right-arrow{
border: none;
}
.twentytwenty-handle{
position: relative;
}
.twentytwenty-left-arrow:before,
.twentytwenty-right-arrow:before{
content: "<";
font-size: 20px;
position: absolute;
top: -10px;
font-weight: bold;
color: #fff;
width: 15px;
text-align: center;
}
.twentytwenty-right-arrow:before{
content: ">";
left: -17px;
}
Hi!
Wow! Nice response time! 🙂 That code worked like a charm!
Here’s a screen capture of the problem: https://www.cloakanddagger.fi/wp-content/uploads/2020/03/Näyttökuva-2020-3-11-kello-12.45.01.png
Any ideas why that happens :S… I’m using Enfold theme.
-
This reply was modified 6 years, 3 months ago by
cloaker1.
Other thing I think some users (me included in sope projects) might want to try is using just one word inside the circle like “DRAG”. Would that be possible with the code you supplied or are the containers going to be a problem for centering one text line?
I think that is because of the CSS conflict. Try to use the !important code in .twentytwenty-left-arrow and .twentytwenty-right-arrow border attributes.
Having the same problem with Bridge theme, the arrows are bonkers. I’ve applied the code above and it only shifted the main arrows down to where the ghosting arrows were.
https://mico.ph/
Hi, I have the same error, but the code has not worked, I use the Bridge theme, could you help me @zayedbaloch
@louisanthonyduran
how did you solve the arrow problem? I have the same issue with bridge theme.
Thanks for your help.