Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 28, 2022 at 5:01 pm #1370584
    ThomasN001

    Hi, as you can see, I have two social icons in my footer. If you hover over them, the coloured squares appear. How can I make all their corners round? At the moment I use this code #top .av-share-box ul {border-radius:8;} in Quick CSS, but only the bottom left corner of the first icon is affected.

    October 29, 2022 at 8:34 pm #1370665
    Mike

    Hey ThomasN001,
    Try this css instead:

    .av-share-link:hover a {
	 border-radius: 8px;
}

    2022-10-29_005.png

    Best regards,
    Mike

    October 30, 2022 at 12:48 pm #1370700
    ThomasN001

    Hi Mike, that’s it… almost. When I click on an icon the coloured square stays on, but the corners aren’t rounded. Only when I hover over them (which makes sense regarding the code). I know this is rather nit-picking, but even out of pure curiosity I’d like to understand, why the other code I used only affected the bottom left corner of the first icon.

    October 30, 2022 at 2:16 pm #1370705
    Mike

    Hi,
    Thanks for the feedback, try this css instead:

    .av-share-link:hover a,
.av-share-link a:focus {
	 border-radius: 8px;
}

    Your css produced an error because it didn’t include “px” after the “8” so the browser didn’t know 8 what ie: px, em, pt, cm, etc
    also there is no ul after the .av-share-link, so your result was an error.

    Best regards,
    Mike

    October 30, 2022 at 2:35 pm #1370706
    ThomasN001

    Thanks Mike, for the explanations. Everything’s fine now! You can close the thread.

    Regards,
    Thomas

    October 30, 2022 at 3:01 pm #1370708
    Mike

    Hi,
    Glad we were able to help, 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 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Round corners for social icons’ is closed to new replies.