Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 2, 2017 at 8:53 pm #728742
    newpappa

    I have two icons in a 1/3 column using ALB. I have them set to align left and have used the below styling to remove the animation effect on hover as well as adjust the sizing. On desktop and tablet they look great: they appear side by side aligned to the left of the column and are quite nice looking. On mobile, they stack each on one row. I prefer that they appear side by side on mobile but have not been able to achieve that. Any suggestions?

    Thanks!

    .av-icon-char, .av-font-icon {
    font-size: 36px !important;
    line-height: normal !important;
    margin-right: 10px;
    }

    .av_font_icon.av-icon-style-border .av-icon-char {
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    }

    .avia_transform .avia_start_delayed_animation.av_font_icon {
    animation: none;
    -webkit-animation: none;
    }

    .av_font_icon.av-icon-style-border a.av-icon-char:hover:after {
    animation: none;
    -webkit-animation: none;
    }

    .av_icon_caption {
    margin-top: 0;
    }

    January 3, 2017 at 5:59 am #728845
    Ismael

    Hey newpappa,

    Thank you for using Enfold.

    Please decrease the width of the icon container on mobile.

    @media only screen and (max-width: 767px) {
    #top .av_font_icon a {
        width: 60px !important;
    }
}

    Best regards,
    Ismael

    January 3, 2017 at 6:03 pm #729088
    newpappa

    It worked beautifully. You guys are terrific!! Thank you!

    January 4, 2017 at 5:06 am #729258
    Rikard

    Hi,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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