Arrow in circled background is not in the center [Card Carousel]

  • Resolved oprsalmartin

    (@oprsalmartin)


    3 years, 7 months ago

    Hi,
    I’m sorry for bothering you again, but the arrow is not centered in the circled background.

    #{{uc_id}} .owl-nav .owl-next{
  	position:absolute;
  	display:inline-block;
  	text-align:center;

    Is there a way to center it with CSS?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Unlimited Elements

    (@unitecms)

    When i go to the link i see this message
    Na webu do?lo k záva?né chybě.

    is there a way to open the link so i can see it

    Thread Starter oprsalmartin

    (@oprsalmartin)

    Oh sorry, you need to refresh sometimes, I’m using free-hosting for testing… It’s pretty annoying that’s for sure…

    Plugin Author Unlimited Elements

    (@unitecms)

    I think its just an optical illusion.
    Here is a link to a codepen i made by copying the code where i gave the icon a background color so you can measure the pixels distance from each side.

    Maybe try using a diffrent arrow icon with a stem.

    Also you can add some css to add margin to the inner arrow like this:

    .owl-next i
    {
    background: black;
    padding-left: 4px;
    }

    Thread Starter oprsalmartin

    (@oprsalmartin)

    Thanks for your help, this solution didn’t work for me, but I come up with another one for anyone wondering how to do it. Simply add 

    .fa-chevron-right:before {
    content: "\f054";
    margin-left: 4px !important; }

    that class obviously varies with your icon

    • This reply was modified 3 years, 6 months ago by oprsalmartin.
    • This reply was modified 3 years, 6 months ago by oprsalmartin.
    • This reply was modified 3 years, 6 months ago by oprsalmartin.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Arrow in circled background is not in the center [Card Carousel]’ is closed to new replies.