Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
The Social Media Follow module is a handy one for when you want to add more social media network links to a website than allowed in the Divi Theme options, but those little guys can be a bugger to centrally align and there is no option for it in the module itself.
Here is a little quick snack to get you aligned!
So let’s get cooking!
Cooking time
This should take you around 3 minutes max.
Preparation
Let’s set up our module.
Add a new row to an existing or new section and then add the Social Media Follow module.
Method
Next open up the module settings and add the networks you want to use and change any of the other options you want to.
Click on the Custom CSS tab and add a custom class of ds-social-follow, then Save & Exit.
Now if you take a look at the frontend, your icons should look something like this:
Let’s center align those icons. Copy the following CSS and paste it into your child theme stylesheet, Divi Options custom CSS box or the page specific CSS box.
ul.ds-social-follow.et_pb_social_media_follow { text-align: center; } .ds-social-follow.et_pb_social_media_follow li { float: none; display: inline-block; }
Now view your page and your icons should be slap bang in the middle
And that’s it.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
Hi Michelle! For some reason, when I add this code, 3 of my social icons are in alignment with one another but the 4th one is dropped down a bit. Any idea why?
Would need a link showing the issue to diagnose Joe
Hi Michelle. Love your tuts. They’ve helped SO much!
Question: I’m trying to find out if there is a way to center the + icon on the toggle module?
I can’t seem to find an answer so I thought I’d ask you!
The effect I’m aiming for is to have a simple + icon (with no title) that is expandable underneath a row.
Thanks for your help.
Alan if you can post your question in my FB group with a link to your site I can try to help https://www.facebook.com/groups/divisoup/
I tried both pasting this into the Divi theme options custom CSS and the social media follow custom css main element, but neither solution centered the little buggers. I only used one custom CSS at a time; I didn’t paste the code into both at the same time. When one didn’t work, I tried the other, and it still didn’t work. :-/ Not sure what to do. You can find the social media follow buttons in the footer. Thank you!! https://almachilsonrealtor.com
I don’t see the custom class applied to that module so the code won’t work.
If you have applied the custom class then turn off minification and static CSS in divi theme options and clear all your caches
Thanks for the help. But how can I enlarge the icon size? in which css box also? pls help
Can’t remember if there is a font setting in that module but if not you need to add your font size like this:
.ds-social-follow.et_pb_social_media_follow li a.icon::before {
font-size: 20px;
}
Works great! Thanks a lot.
Most welcome Andre
Perfect ! Exactly the solution I was looking for.
Thanks.
Good to hear John
Hi- can you change the colours of the social media icons in this module? thanks
Yes, when you add you icons via the module you can choose a colour, the default is the brand colour for the chosen network.
Thanks I got it, still working on getting it above the bar menu, like you have it. But I am sure I will find a way.
Oh my gosh, it worked! It took me a couple of goes to work out where the Divi Options custom CSS box was (I’m a complete newbie and still don’t know how to access the child theme stylesheet or where a page specific CSS box is) but it worked straight away. Thank you so much!
Most welcome Sandy
Many many thanks,
it helped me a lot. Great!
Regards from Germany.
Works perfectly, thank you for all the awesome snippets Michelle!
Welcome Noelle
Ok I’ve got it working except the social media icon to the far right is dropped? I can’t figure it out. thanks.
Sounds like you don’t have enough room for your total icons. Would need to see a link.
Michelle,
Thanks so much for this tip!
Unfortunately, I seem to be having the same error as Karyn above. I have two social media follow symbols and the one on the right is dropped down below (uneven with the one on the left.) When there are only two icons, there’s plenty of room; however, no matter how many symbols I add, the one on the far right always drops down. Any idea what could be going wrong? Your help is highly appreciated
I would need a link to be able to inspect the issue please.
Michelle,
Thanks for agreeing to look into this. Unfortunately I cannot share a link to this on my website since I have my domain pointing to my old host while I work on my new version of my website. If you are really interested, I could grant you temporary administrative control – please let me know. I did, however, find a solution by changing the section width to full-width and this allowed for the two social media icons to sit at the same height next to one another.
That’s as good a solution as any if it works across device sizes Jimmie
same thing happen to me. wondering if there’s a solution for it
As mentioned above, I do need to see the issue in action to be able to say what is wrong
Hi Michelle, thank you so much for this – you saved my sanity on my main website – thank you!! I have a quick question – it doesn’t work on one of my sites where the social media follow module is one of a row of three modules – the module is on the right – is this because of the positioning of the module? And is there a way to make it work? Thanks again for the info.
Natasha the code is for the sidebar widget not a module, that said, if you are using the sidebar module to display the sidebar it should be fine. Do you have a link and I will check
Hi Michelle, Thanks for this. I can’t get it to work though. I’ve added the class ds-social-follow into the module and copied and pasted the code into the Divi Options panel , but nothing is happening. The Social Media Follow module is the most annoying in the whole of Divi! I’ve tried various bits of code from around the web to make the icon and circle behind it bigger and got it working on one site, but not on this one! Have given up on the size for now but would be very grateful if you tell me why the… Read more »
Hey Faith, I just took a look and it seems you got this working?
I’m seeking assistance with a similar problem http://argodevelopmentstudio.com/
The footer contains social media follow module and I can’t for the love of god get it to center on mobile and tablet as it resizes. The module would align to the left as it resizes.
Any idea what’s wrong? Thanks in advance!
You have 170px padding to the left on that module, remove that on mobiles and tablet and then use the recipe to center the icons