Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 20, 2015 at 3:19 am #414991
    markmiller717

    I would like to improve the appearance of my social media icons in two ways:

    1. horizontally align (center) them
    2. create a bit of space between them

    Example at the very bottom of this page:

    http://www.pedegoelectricbikes.com/dealers/carlsbad/

    I’m very grateful for any help.

    March 20, 2015 at 8:11 pm #415493
    Elliott

    Hey markmiller717!

    Try adding this to your custom CSS.

    .avia_codeblock .av_font_icon {
  margin-right: 30px;
}

    Regards,
    Elliott

    March 22, 2015 at 1:25 am #415823
    markmiller717

    Thanks. This got me started in the right direction. Just in case anyone else needs it below is all the CSS I ended up with. It allowed me to center the icons, made the margin smaller for mobile only and added a little hover effect.

    .avia_codeblock .av_font_icon {
    margin-right: 30px;
    }

    .avia_codeblock .av_font_icon:hover {
    opacity: .8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    }

    .avia_codeblock .av_font_icon {
    display: inline-block;
    float: none;
    }

    @media only screen and (max-width: 767px){
    .avia_codeblock .av_font_icon {
    margin-right: 20px;
    }
    }

    March 23, 2015 at 7:33 am #416230
    Rikard

    Hey!

    Thanks for sharing, please get back to us if you should have any other issues.

    Cheers!
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.