carousel button

[alexoliveira]

A frequent complaint from my clients at the agency is that the carousel button is crooked and they charge me a lot to fix it, does anyone have a solution?

https://ibb.co/THMksSp

[Pablo]

Do you have a demo project so I can see all your settings?

[alexoliveira]

https://encurtador.com.br/aU0m8

[Pablo]

You are using the Card Container in carousel mode. This is based on the OWL script. This third party script is using the < and > characters of the default font-family for navigation.
So, if you want to control the appearance of the arrows then you can select a different font in the page properties.

If you want to control the exact position of the arrow then you can add some custom code. Note that the offset depends on the selected font so this cannot be done automatically.

Code: Select all

<style>
#CardContainer1 .owl-nav button.owl-prev, 
#CardContainer1 .owl-nav button.owl-next 
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-wrap: nowrap;
}
#CardContainer1 .owl-nav button.owl-prev span, 
#CardContainer1 .owl-nav button.owl-next span 
{
   transform: translateY(-6px);
}
</style>

[alexoliveira]

Thank you very much Pablo, the code is working correctly.

[alexoliveira]

Could you consult this website and tell me why the code is not working on the button?

https://tonydivisorias.com.br/

[Pablo]

Where exactly on the website I need to look?
Can you please be more specfic?

[alexoliveira]

Of course... on the carousel button (next - prev), I applied the code provided and it is working correctly on other sites, but on this specific one it didn't work. ID: (produtosslid)

[Pablo]

The code has been applied incorrectly.
It should be in Page HTML, not in the class property.

[alexoliveira]

I just checked that when changing the general font, the code works again.

With that, I thank you for the support.

[alexoliveira]

The code has been applied incorrectly.
It should be in Page HTML, not in the class property.

Where would it be correct to add the code?

[Pablo]

The code should be added in Page HTML.
https://www.wysiwygwebbuilder.com/add_html.html