Canvas Support

owl carousel

6 replies · opened Oct 13, 2020

FfivepointsOct 13, 2020

Hi,
I need owl carousel next and prev arrows like your theme but only just with backgound in a circle, not in a rectangle.
I need some css border-radius: 50% somewhere. I need to change backgound colors of this circle and maintain arrows white.
how can I create this? now I'm using this but there is a grey rectangle as backgound.


    
       
![attachment](../images/1.jpg)
 
![attachment](../images/2.jpg)
 
![attachment](../images/3.jpg)

in this link you can see:
https://www.galvanotecnicagt.it/test/processi-produttivi/zincatura.html
use this access:
username: galvanotecnicagt
password: F@iWz@55

thanks
nicola

SSemicolon WebSTAFFOct 14, 2020

Hello,

Consider using this CSS Code:
[ch_pre type="css"].slider-element .owl-nav [class*=owl-] {
border-radius: 50%;
width: 60px;
}[/ch_pre]

You can further add your custom CSS Properties according to your needs.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

FfivepointsOct 14, 2020

hi, ok thanks now it works.
there is only this: arrows are not well centered.
I've just incresed font size but it does not depend on font size.
I'm using:

.slider-element .owl-nav .owl-prev {
  margin-left: 10px;
  text-align: center;
}

.slider-element .owl-nav .owl-next {
  margin-right: 10px;
  text-align: center;
}

but with text-align: center does not center well arrows.

how can I do?

thanks
nicola

FfivepointsOct 14, 2020

ah, another thing is that I don't know how ro remove the white space in home page (see attached image).
I've tried with some css stuff but nothing.

thanks
nicola

SSemicolon WebSTAFFOct 15, 2020

Hello,

  1. The Icons alignments are sometimes off because of the viewport of the Icons and not because of the CSS. If you try using some other icon, you will notice that the Icons are well-centered. Meanwhile, you can consider using the following CSS to move the Icons:
    [ch_pre].slider-element .owl-nav [class*=owl-] i {
    position: relative;
    margin: 0;
    }

.slider-element .owl-nav .owl-prev i {
left: 0;
}

.slider-element .owl-nav .owl-next i {
left: auto;
right: 0;
}[/ch_pre]

Simply change the left Value in .owl-prev and right Value in .owl-next.

  1. There is a Default of 80px added to the .content-wrap DIV. To remove that space from the bottom, add the .pb-0 Class to the .content-wrap DIV.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

FfivepointsOct 15, 2020

I thank you for your reply!
point 1 works fine, point 2 doesn't remove padding bottom space. I don't know why: I'm using pb-0 bootstrap class as you suggested, removed py-0, used py-0 and pb-0 on .content-wrap but nothing. tried using inline style with padding: 0 but nothing.
tried adding pb-0 on <section> tag too before .content-wrap but nothing.

I don't know why. I think is something related to bootstrap.

this is the link:
https://www.galvanotecnicagt.it/test/index.html
use this access:
username: galvanotecnicagt
password: F@iWz@55

thanks
nicola

SSemicolon WebSTAFFOct 15, 2020

Hello,

We have just checked out your Codes and the issue is that there is a .bottommargin-lg Class defined on the .row DIV in the #contatti Section. Simply remove this Class and the blank space will be gone.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard