Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #1068406

    I am working to re-create a broken layout from a different theme where the social icons were centered in a row in the footer. Here’s a screenshot of what I’m attempting to create with Enfold:
    social icons

    What I’m building isn’t exactly the same, but I would prefer that the icons be aligned in the center. I’ve started building this with the Icon element in the Avia Layout Builder, and here’s a page with my result:

    When I set the alignment of the individual icons to “Center”, the icons just stack up on top of each other. I also looked into using the social media icons in the socket to accomplish this. What I found in the forum didn’t work out well for me.

    I really appreciate any CSS help you can offer to clean this up and get it centered so it looks closer to the example screenshot.



    Hey AJDesignCo,

    Loading your web site, I cant see anything listed there as of what you want to do.

    Best regards,


    Hi Basilis! Not sure what happened…apparently some pages got trashed. It should be restored now. I have an individual page with four social icons built out in the Advanced Layout Builder.

    My main goal here is to have those four icons centered. It’s obvious they are aligned to the left when you look at it on mobile.

    I’ve tried to influence things with CSS and I haven’t found the right element or class to apply styling to to get it to center. I appreciate any help you can offer. You should have admin credentials in the private content above if you need it.

    Thanks, Andy

    • This reply was modified 1 year, 4 months ago by  AJDesignCo.
    • This reply was modified 1 year, 4 months ago by  AJDesignCo.

    Hi AJDesignCo,

    It will be easier to center them if you put them in a 1/1 element and wrap them in some div with a custom class, then we can provide a solution that will be responsive and clean.

    Best regards,


    Hi Victoria, thanks for your reply. I just placed the social icons in a 1/1 element, and I gave that element a custom class called vital-social.

    Does that enable you to provide the responsive, clean solution?



    Hi Andy,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    .flex_column.av_one_full.flex_column_div.vital-social {
        width: 170px;
        margin: 0 auto;
        float: none;

    If you need further assistance please let us know.

    Best regards,


    That looks great on desktop! But when the layout shifts to mobile, the icons are aligned left. Can you please adjust? Many thanks, Andy



    Add this to quick css:

    @media only screen and (max-width: 767px){
        text-align: center;
        margin: 0 25%

    Best regards,
    Jordan Shannon


    Perfect. Thanks everyone!



    Great, I’m glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,


    It’s solved. You can close it. Thanks!



    Great, thanks for letting us know. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Center Social Icons (Row of Icon elements vs. Socket icons)’ is closed to new replies.