Many WordPress users have been facing issues in center aligning the footer widget on their WordPress site. In this post, I will show you, how to center footer widget in WordPress.
The solution to this problem is quite simple and involves adding a tiny code snippet of CSS.
Contents
Here are the detailed steps for your reference.
Step 1 – Login to your WordPress dashboard. Go to Appearance >> Customize >> Additional CSS
Step 2 – Add the following code snippet in the space provided.
.footer-widgets {
text-align: center;
width: 100%;
overflow: hidden;
}
Here .footer-widgets is the class selector for the footer widget area. This may be different for your website depending on the theme that you use.
You can find out the class of the footer widget area of your theme using the Inspect Element functionality in Chrome or any other browser. More on that here – Get Started With Viewing And Changing CSS
Step 3 – Click on the Publish button to save your changes. The footer widget of your website will be centered now.
Theme Specific Options
Centre Widget in GeneratePress
If you use GeneratePress theme on your website, use the following CSS:
.footer-widgets {
text-align: center;
}
Centre Widget in OceanWP
In case you are using the OceanWP theme on your website, add the following CSS:
#footer {
text-align: center;
}
#footer .owp-social-share li {
display: inline-block;
float: none;
}
#footer-widgets .widget-title .footer-box {
padding: 0;
border: 0;
}
#footer-info {
margin:0 auto;
width: 100%;
text-align: center !important;
}
@media only screen and (min-width: 980px) {
#footer-bottom .et-social-icons { margin-bottom:-28px; }
}
I hope this post helped you center the footer widget on your WordPress website.
If you are unable to find out the CSS selector for the footer widget on your website, feel free to comment below and I will provide you the specific code snippet for your website.
Also Read
How to Change Widget Background Color in WordPress?
How to Minimize Redirects in WordPress?
Leave a Reply