Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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:
    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!

    #1069661

    Hey AJDesignCo,

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

    Best regards,
    Basilis

    #1070093

    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.
    #1070694

    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

    #1070826

    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

    #1071776

    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

    #1071971

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

    #1071978

    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

    #1072003

    Perfect. Thanks everyone!

    #1073010

    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

    #1074631

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

    #1075322

    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

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.