Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 2, 2023 at 3:14 pm #1399842
    resting-jeppesen

    I’m trying to add my own separator icon using this code:

    `span.av-seperator-icon {
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png)!important;
    background-size: contain;
    background-repeat: no-repeat;
    }
    span.av-seperator-icon:before {
    color: transparent;
    }

    It works but I want to adjust the size of the icon to about 150px in width so I added “width: 150px;” to the code and yes it works but the image is off center and pushes the right line further to the right so it doesn’t work properly.

    So my question is how can I edit the size of the custom icon? And I’d also like the line to go all the way to the left and right.

    Thanks in advance.

    March 3, 2023 at 3:35 am #1399922
    Nikko

    Hi Jonas,

    You just need to change the background size from contain to cover, and add a line-height of 30px, so your first code block should look like this:

    span.av-seperator-icon {
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png)!important;
    background-size: cover;
    background-repeat: no-repeat;
    width: 150px;
    line-height: 30px;
}

    Hope it helps.

    Best regards,
    Nikko

    March 3, 2023 at 9:16 am #1399955
    resting-jeppesen

    Unfortunately it’s still off center. Is there a way to fix that? :) It’s clearer that it’s off center when I resize the browser window to be smaller.

    March 3, 2023 at 10:00 am #1399964
    resting-jeppesen

    It’s also very noticeable on mobile.

    March 3, 2023 at 12:35 pm #1399982
    Mike

    Hi,
    Please try adding this css:

    .hr.hr-custom.hr-center.hr-icon-yes .hr-inner {
    max-width: 24%;
}

    After applying the css, please clear your browser cache and check.
    If you are going to use many different separators I recommend adding a custom class to this one and adding that custom class to the css rule above.

    Best regards,
    Mike

    March 3, 2023 at 1:18 pm #1399990
    resting-jeppesen

    That makes it centered on desktop but not on mobile unless I change the number to something lower like 10%. So it really depends on the screen width. But what it does is it shrinks the line so it doesn’t go all the way to the edges. Is that not possible to do?

    March 3, 2023 at 3:27 pm #1400030
    resting-jeppesen

    In the end I changed the image and didn’t need the line anyway. But I did manage to center it by adding:
    background-position: center;

    But you can close this now. Thanks for trying! :)

    March 3, 2023 at 6:57 pm #1400048
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Custom separator icon – adjust size?’ is closed to new replies.