Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #1272356

    Good Morning to the support team!
    I wanted to add social media icons to the last column of a 4 column footer widget.
    So far everything went without problem after following some other threads here in this forum.

    What I did so far :

    Added the social icons to a text widget via HTML Code (links edited for privacy):

    <ul id=”custom_links” class=”noLightbox social_bookmarks icon_count_4″>
    <li class=”social_bookmarks_linkedin av-social-link-linkedin social_icon_1″><span class=”avia_hidden_link_text”>LinkedIn</span>
    <li class=”social_bookmarks_youtube av-social-link-youtube social_icon_2″><span class=”avia_hidden_link_text”>Youtube</span>
    <li class=”social_bookmarks_instagram av-social-link-instagram social_icon_3″><span class=”avia_hidden_link_text”>Instagram</span>
    <li class=”social_bookmarks_facebook av-social-link-facebook social_icon_4″><span class=”avia_hidden_link_text”>Facebook</span>

    Used these modifiers to get the look i was going for:

    /* Idle (all links) */
    #custom_links li a {
    background: white !important;
    color: #5e5e5f;

    /* Hover(all links) */
    #custom_links li a:hover {
    background: #da291c !important;
    color: white !important;

    .widget .social_bookmarks li { clear: none !important; }

    #footer .social_bookmarks li {
    border: none;

    #footer .social_bookmarks li a {
    width: 50px;
    line-height: 50px;
    #footer .social_bookmarks li {
    width: 50px;
    height: 50px;

    But now, while the size, color, hoverstate etc. is the way I want it, half of the icons are cut off.


    Any advice in how to fix this?


    Managed to fix it by adding :)

    #footer .social_bookmarks {height:50px;}



    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Social Media Icons added to footer but get cut off after size change’ is closed to new replies.