I don’t know about you but just about every site I build with Divi I end up setting my header full-width as it the style I tend to like but the issue for me is that there no option in Divi to do same with the footer.
Today I’m going to show you in a very short tutorial because it pretty simple to do, so let’s get down to the CSS to have a full-width footer.
Let’s first make the bottom bar with our copyright in it full-width
CSS Snippet
#footer-bottom .container{
margin-right: 2.773%;
margin-left: 2.773%;
width:94.454%!important;
max-width: 94.454%;
}Now let’s make the main footer area full-width, I am assuming you would like this section to be full width as well.
CSS Snippet
#main-footer .container{
margin-right: 2.773%;
margin-left: 2.773%;
width:94.454%!important;
max-width: 94.454%;
}if you made both your footer sections full-width then maybe replace the previous two line of code with just this one line of CSS.
CSS Snippet
#footer-bottom .container, #main-footer .container{
margin-right: 2.773%;
margin-left: 2.773%;
width:94.454%!important;
max-width: 94.454%;
}
Some your widget might overlap due to the width not being very wide by default so we will add the following to line to make our widgets take up their full-width of it column.
CSS Snippet
#main-footer .fwidget.et_pb_widget {
width: 100%!important;
max-width: 100%!important;
}
Thanks James – Just what I needed – works perfectly 🙂
Glad you found it useful :), you can adapt this idea for other things as well like sidebar items 🙂
Thank you very much James! You just made it possible to fit an entire horizontal footer menu, even on smaller screens!
One question, is it possible to center align just the menu, not the rest of the footer?
James, please advise where to enter the CSS? I’ve already made amendments to the standard footer text by adding CSS code to the integration tab of the Divi Theme Options. When I add your code there are some errors.
Saved my day. Thanks so much
Thanks, Mr Fosker.
Very Helpful, and aesthetically pleasing as well.
Ahmad
Just what I needed. Thank you and thanks to Google for getting me here. For some reason, it wasn’t centered on my child theme. Removing the following bit seemed to fix that.
margin-right: 2.773%;
margin-left: 2.773%;
So kooooooool for the code. Hehehe was searching for this little one. 🙂 .
Thanks a lot.
Awesome thanks mate!
It’s a shame you don’t have a donate button! I’d
certainly donate too this fantastic blog! I guess for now
i’ll settle forr book-marking and adding your RSS feed to
mmy Google account. I look forward to fresh
updates and wil share this website with my Facebook group.
Talk soon!
Thank you thank you, spent over an hour trying to figure this out, then googled and here you were… Much appreciation