Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 18, 2019 at 3:37 pm #1068406
    AJDesignCo

    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:
    https://staging.vitalspacesnow.com/social-icons/

    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.

    Thanks!

    February 20, 2019 at 8:01 pm #1069661
    Basilis

    Hey AJDesignCo,

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

    Best regards,
    Basilis

    February 21, 2019 at 8:31 pm #1070093
    AJDesignCo

    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 5 years, 9 months ago by AJDesignCo.
    February 23, 2019 at 5:15 pm #1070694
    Victoria

    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,
    Victoria

    February 24, 2019 at 2:58 am #1070826
    AJDesignCo

    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?

    Thanks!
    Andy

    February 26, 2019 at 2:09 pm #1071776
    Victoria

    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,
    Victoria

    February 26, 2019 at 8:37 pm #1071971
    AJDesignCo

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

    February 26, 2019 at 8:54 pm #1071978
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen and (max-width: 767px){
.template-page.content.av-content-full.alpha.units{
    text-align: center;
    margin: 0 25%
}}

    Best regards,
    Jordan Shannon

    February 26, 2019 at 9:54 pm #1072003
    AJDesignCo

    Perfect. Thanks everyone!

    March 1, 2019 at 10:20 am #1073010
    Rikard

    Hi,

    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,
    Rikard

    March 5, 2019 at 4:46 am #1074631
    AJDesignCo

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

    March 6, 2019 at 7:06 am #1075322
    Rikard

    Hi,

    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,
    Rikard

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