Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 4, 2014 at 11:06 pm #260019
    addwebtoday

    Hello,
    Thank you for an amazing theme!

    I’m currently using the Fontello Icons as on page sliding navigation (for http://schneidercentre.com/) as it has a great look with the theme and brand. Right now, the buttons don’t change sizes on mobile, and really take away from the look of the site. The buttons are also not very responsive when using them on a touch pad, and don’t work on iOs when the background is parallax, but do work when the background is in “sliding” or “fixed” setting.

    Please help with some CSS that will allow better mobile functionality of the Fontello apps for the Enfold Theme. I really want to use this strategy on this theme a couple times over as it looks great.

    The ideal results would be 3 different sizes based on the 3 different dimension widths provided with the theme’s responsive layout. Right now I have them at 60 px, so 40 px for tablet and 20 px for phone seems to make sense.

    Thank you for your help!
    -addwebtoday

    May 7, 2014 at 6:44 am #261157
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 767px) {
a.av-icon-char {
    font-size: 20px !important;
    padding: 10px !important;
}
}

    You can duplicate and modify it to fit your needs.

    Cheers! 
    Josue

    May 11, 2014 at 1:29 am #262850
    addwebtoday

    Hey Josue, thank you for your response!

    This almost worked, but still has some issues. I posted an example in a link below:

    http://schneidercentre.com/example/icons/

    It appears that there is some issues with sizing consistently with the CSS provided. Is there anything that can make sure these icons stay consistent? My concern is that they are used for navigation and need to be easy to use for visitors in addition to the typical “sandwhich” header nav on phones which most older folks aren’t fully accustomed too.

    Thanks again for all your help!

    Thank you,
    -addwebtoday

    May 11, 2014 at 5:46 am #262859
    Josue

    Hi!

    Use this code instead:

    @media only screen and (max-width: 767px) {
.av-icon-char {
    font-size: 20px !important;
    padding: 10px !important;
}
}

    That will target all icons, not only icons with a link.

    Cheers!
    Josue

    August 9, 2014 at 6:13 pm #302033
    addwebtoday

    Thank you again Josue! This worked, but to a limited extent. The Icons on mobile are causing the browser to crash due to the CSS. Is there a way to disable the CSS as well on the icons in regards to their transition and the shimmer the icon border puts off when hovered? I still need the tool tips so that on mobile, when someone selects an icon that links to another page, they can see the tool tip then push the button again. If this is not doable, I guess I will do away with the tool tips but it’s not preferable since it’s such a cool feature.

    I’d keep the CSS in general but it doesn’t seem to want to render consistently.

    Thanks again!

    August 10, 2014 at 1:00 am #302093
    Josue

    Hi!

    If you want to disable the shadow hover animation (on mobile) try with this:

    @media only screen and (max-width: 767px) {
a.av-icon-char:after {
    display: none !important;
}
}

    Cheers!
    Josue

    August 10, 2014 at 4:47 pm #302257
    addwebtoday

    Fantastic. Thank you so much for providing your help on this.

    One last question: is there a way to have the icons that aren’t given a circle border be a bigger size than the icons that have a circle selected. Reason being, is I use both on my site, and make the on page navigation arrow icons much larger than the other icons in order for them to be seen. This code makes all icons the same size, making the arrows pointing down the page hard to view on mobile.

    Thanks again!!

    PS

    just wanted to say that this actually really improves the mobile experience of the theme. I’ve ran dozens of trials and put in support tickets for mobile crashing and I think the CSS may have been a main culprit. Please pass on to anyone having issues with mobile if their page is using any type of CSS that mine is. This includes safari, firefox, and chrome.

    Thanks again Josue and support team!!

    August 11, 2014 at 1:57 am #302344
    Ismael

    Hi!

    You can add a unique selector for each Avia Elements. Edit functions.php, find this code:

    if(isset($avia_config['use_child_theme_functions_only'])) return;

    Below, add this code:

    add_theme_support('avia_template_builder_custom_css');

    Edit any avia elements like the Icon without the border then add a selector on the Custom CSS class field. Let’s use “default-icon” for example. Add this on Quick CSS or custom.css to change the size of the icon without the border:

    .default-icon span {
font-size: 60px !important;
}

    Regards,
    Ismael

    October 18, 2014 at 2:28 pm #337685
    addwebtoday

    This should do the trick. Feel free to close this ticket for now. Thank you!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Adjusting AV Font/Fontello Icon Sizes’ is closed to new replies.