Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #627200

    Hi Kriesi

    I am having a situation in resizing all my icons i use with iconbox
    If i resize one iconbox icons that others change as well, so one looks gaad but the rest are all off.
    I would just like all of my icons to be bigger and the same size.

    So as an example i used

    #top .iconbox .iconbox_icon {
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 40px;
    }
    

    that took care of the “Why Choose Us” part on my homepage but now the rest of my icons are not aligned correctly.
    Is there a way to have them all the same size? so the icons on placed above would be the same size as icons placed to the left or right of content, how can i style them individually?
    Just need the correct CSS to use here, if you could point me in the right direction or maybe another post.
    Thank you for your time

    #628530

    Hey indieweb,

    Thank you for using Enfold

    Please turn on the custom class field so that you can style each iconbox element individually: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    #628696

    Hi Ismael
    Thank you for steering me in the right direction.
    Will do that.
    Cheers

    #629046

    Hi,

    Great, please let us know if you should need any more help on the topic.

    Best regards,
    Rikard

    #634000

    Hi Rikard

    Having some trouble adding the custom css.
    so as an example i added .testimonial in an icon box’s custom css field.

    Then in my enfold child css i added

    #top testimonial .avia-button .avia-size-large {
        border-radius: 22px !important;
        font-size: 13px;
        min-width: 139px;
        padding: 15px 30px 13px;
    }

    as i want the button to have rounded corners.

    but there is no effect in the frontend, what am i doing wrong here, just one example of yours would help.

    Thank you for your time

    • This reply was modified 7 years, 11 months ago by waveshaper.
    #634144

    Hi,

    There is a missing “.” in the code please add a “.” before testimonial in line

    #top testimonial .avia-button .avia-size-large {
    

    Let us know if that fix the issue.

    Best regards,
    Vinay

    • This reply was modified 7 years, 11 months ago by Vinay.
    #634795

    Hi Vinay

    Thank you for pointing me in the right direction, it worked but then i changed the name to gbutton

    I used

    #top .gbutton .avia-button .avia-size-large {
        border-radius: 20px !important;
        font-size: 13px;
        min-width: 139px;
        padding: 15px 30px 13px;
    }

    and placed the name gbutton in the custom css field of the button element.

    custom css in button element

    but now it does not pick up the custom css at all, what am i missing here ?

    Thank you for your patience

    • This reply was modified 7 years, 11 months ago by waveshaper. Reason: new situation
    #635641

    Hi,

    Replace the selector with the following:

    #top .gbutton .avia-button.avia-size-large {
        border-radius: 20px !important;
        font-size: 13px;
        min-width: 139px;
        padding: 15px 30px 13px;
    }

    This article might help: http://kriesi.at/archives/wordpress-developers-your-complete-guide-to-conquering-css-in-2016

    Best regards,
    Ismael

    #635803

    Hi Ismael

    Legend! it worked, and thank you so much for the helpful link, need to study up on it.

    Seems i went wrong here .avia-button.avia-size-large had a space.

    Excellent support, situation solved!
    Cheers

    #635849

    Hi,

    Glad we could help!

    Thank you for using Enfold.

    Best regards,
    Vinay

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Enlarge all icons to the same size with iconbox’ is closed to new replies.