Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 4, 2016 at 1:31 pm #627200
    waveshaper

    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

    May 7, 2016 at 4:02 am #628530
    Ismael

    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

    May 7, 2016 at 9:44 pm #628696
    waveshaper

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

    May 9, 2016 at 7:25 am #629046
    Rikard

    Hi,

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

    Best regards,
    Rikard

    May 17, 2016 at 9:18 pm #634000
    waveshaper

    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 8 years, 6 months ago by waveshaper.
    May 18, 2016 at 5:00 am #634144
    Vinay

    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 8 years, 6 months ago by Vinay.
    May 18, 2016 at 9:48 pm #634795
    waveshaper

    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 8 years, 6 months ago by waveshaper. Reason: new situation
    May 20, 2016 at 3:09 am #635641
    Ismael

    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

    May 20, 2016 at 10:03 am #635803
    waveshaper

    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

    May 20, 2016 at 12:23 pm #635849
    Vinay

    Hi,

    Glad we could help!

    Thank you for using Enfold.

    Best regards,
    Vinay

  • Author
    Posts
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.