Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 25, 2018 at 10:29 am #902722
    LeoWan65

    Hi Enfold Team,

    I have challenge to center the icons. I have a 6 icons to align center (within same row). When all icons align left or right, it will stay in same row. However when it align to center, it will create new row by itself, making it a vertical stack.

    How can I align them to center without creating a vertical column?

    Link: http://seoconsultant.com.sg/staging/digital-marketing-academy/
    Check on the 2nd footer: Connect With Us

    I tried using the quick CSS for 2nd footer to align center, no results for the icons. Below is the code I found and used:

    #footer .container .flex_column:nth-child(2) .widget{
    text-align: center;
    }

    First two icons (FB and LinkedIn) are using the center alignment, and it’s creating a vertical stack. Below four icons are on left alignment, that is what I would like to achieve, to create a horizontal row. However at the same time, I would like to ‘centered’ them. Let me know how can I make it better.

    January 25, 2018 at 1:49 pm #902844
    Mike

    Hey Leo,
    Try to make all of the icons align left so they are in a row, then use this css:

    #custom_html-6 .textwidget.custom-html-widget {
    width: 99%;
    margin: auto;
}

    the “margin: auto” places the same margin on both sides of the element, centering it.
    typically this works better if the outer element is full width of the page and inner element is set to 50%, in this case your icons are filling almost the full inner element.

    Best regards,
    Mike

    January 26, 2018 at 5:02 am #903162
    LeoWan65

    Hi Mike, appreciate your quick response. I inserted the code into the quick CSS and it does not center it. Am I doing something incorrect?

    As these icons are displaying at footer with limited space, and icons are filling almost the full inner element, that means it will not align to center?

    January 26, 2018 at 5:18 am #903170
    Mike

    Hi,
    I adjusted the code some and got it much closer, please try this code instead:

    #top #wrap_all section#custom_html-6.widget_text.widget.clearfix.widget_custom_html {
    width: 90%!important; 
    margin: auto!important; 
}

    2018-01-25_221620
    Please clear your browser cache and check.

    Best regards,
    Mike

    January 26, 2018 at 11:42 am #903301
    LeoWan65

    Ahhh now I understand how the auto margin alignment works now. Are there other alternatives to center it without sacrificing the margin alignment size?

    January 26, 2018 at 12:53 pm #903353
    Mike

    Hi,
    Try using this instead:

    #custom_html-6 .textwidget.custom-html-widget {
    display: flex;
    justify-content: center;
}

    Best regards,
    Mike

    January 29, 2018 at 4:39 am #903992
    LeoWan65

    got it! It worked perfectly now. Thanks a lot, Mike. I appreciate your fast assistance!

    Best regards,
    Leo

    January 29, 2018 at 5:38 am #904028
    Nikko

    Hi,

    Glad that Mike helped you. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Content Elements – Icon: How to center it?’ is closed to new replies.