Tagged: CSS, social icons
-
AuthorPosts
-
February 18, 2019 at 3:37 pm #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:
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 #1069661Hey AJDesignCo,
Loading your web site, I cant see anything listed there as of what you want to do.
Best regards,
BasilisFebruary 21, 2019 at 8:31 pm #1070093Hi 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, 10 months ago by AJDesignCo.
February 23, 2019 at 5:15 pm #1070694Hi 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,
VictoriaFebruary 24, 2019 at 2:58 am #1070826Hi 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!
AndyFebruary 26, 2019 at 2:09 pm #1071776Hi 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,
VictoriaFebruary 26, 2019 at 8:37 pm #1071971That 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 #1071978Hi,
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 ShannonFebruary 26, 2019 at 9:54 pm #1072003Perfect. Thanks everyone!
March 1, 2019 at 10:20 am #1073010Hi,
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,
RikardMarch 5, 2019 at 4:46 am #1074631It’s solved. You can close it. Thanks!
March 6, 2019 at 7:06 am #1075322 -
AuthorPosts
- The topic ‘Center Social Icons (Row of Icon elements vs. Socket icons)’ is closed to new replies.