Don’t get me wrong. I love Divi – but let me rant.
I have been designing websites now for over 25 years. I’ve been around since FrontPage, which makes me approximately a million years old in computer years. In all my years of designing websites for clients – I have never once left aligned the bottom bar. You know what I’m talking about. The bottom bar – where you usually have a copyright date, company name, “all rights reserved”, blah blah etc.? Yeah, that one. I’ve seen millions of websites – 99.98% have the bottom bar centered.
So why does Divi default to a left-aligned bottom bar? Every new site I build I have to take the time to go into the additional CSS, put in my “Centering Bottom Bar CSS code” to get what should have already been there in the first place. I mean it would be easy right?
I even came up with a preview of what this new functionality might look like – check it out below:
Pretty cool, eh?
Imagine how much collective time this would save? Nick Roach, if you are listening – Please give us this option!
Rant over.
Okay. So how do we center the bottom bar in Divi? CSS of course. Just cut and paste the following code into your Additional CSS area, save it and then refresh your page. Ta-dah. You have just become one of the 99.98%.
/* Center Bottom Bar */
#footer-info { width: 100%; margin:0 auto; text-align: center !important; }
@media only screen and (min-width: 980px) {
#footer-bottom .et-social-icons { margin-bottom:-28px; }
}
In conclusion, adding this code takes no time at all. I’m just ranting for the sake of ranting – but it would make a great program even greater. Just saying.
Thanks, John
This works great.
No problem Shane – thanks for reading!
Nice bro
Thanks a lot for sharing this information. I have been all along trying to find a way to centre the bottom bar. I have even tried some coding which never worked. You have actually saved me. Thanks once again
You are very welcome Charles –
Thanks for this. Is there a way to shrink the height of the bottom bar? Mine is about 1.5 inches tall.
A bit late with this, but still…
I added a few bits to John’s code to reduce the height of the bottom bar as well as reduce the text size and the line height:
#footer-info { width: 100%; margin:0 auto; text-align: center !important;
font-size : 0.7em;
line-height: 1.2em;
margin-top: -15px!important;
}