Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #414991

    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.

    #415493

    Hey markmiller717!

    Try adding this to your custom CSS.

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

    Regards,
    Elliott

    #415823

    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;
    }
    }

    #416230

    Hey!

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

    Cheers!
    Rikard

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