Footer Widget Align

This topic has 10 replies, 2 voices, and was last updated 7 years, 6 months ago by Wes.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
November 3, 2016 at 11:19 am #19874
Robert
Customer
Hello Wes,

My developer and I are looking for how to center a social media icons widget in the 2nd footer widget.

Doing a float: center makes things screwy.

Any ideas?
November 3, 2016 at 11:37 am #19875
Wes
Moderator
You can add this custom code to your style.css file and it should center it.
```
.footer-widgets-2 .alignleft {
  float: none;
  text-align: center;
}

.simple-social-icons ul li {
  display: inline-block;
  float: none !important;
}
```
I just tested this on a local install and it seems to work fine. If it doesn’t work on your site, send me a link so I can see what’s preventing it.

BTW, float: center doesn’t exist, there’s only left and right.

The only ways to center text or containers is with –

text-align: center;

and

margin-left: auto;
margin-right: auto;

Let me know if this helps
November 3, 2016 at 12:01 pm #19878
Robert
Customer
This reply has been marked as private.
November 3, 2016 at 2:17 pm #19880
Robert
Customer
Thanks Wes. Unless I am place the code in the wrong place, the code did not work for me. My site is http://www.robertkennedy3.com. Please let me know what needs to be done. I can create a user login if you need.
November 3, 2016 at 9:10 pm #19884
Wes
Moderator
Ah, I thought you were using the Simple Social Icons plugin (the one we use in the Theme Demo). Since you’re using a different plugin, I’ll have to take another look to see how it can be done.

Give me a sec
November 3, 2016 at 9:14 pm #19885
Wes
Moderator
Ok try and add this to your CSS. I’d just add it in your Theme’s CSS or a Custom CSS file (or wherever you want to add your custom CSS code).
```
.social-bookmarks li {
    display: inline-block !important;
    float: none !important;			
}
```
That will make it look like this – http://i.imgur.com/7G0Uqq6.png
November 3, 2016 at 9:17 pm #19886
Robert
Customer
I’m using Brankic social widget.

https://wordpress.org/plugins/brankic-social-media-widget/

I’ll try what you mentioned.
November 3, 2016 at 9:26 pm #19887
Robert
Customer
That didn’t work for me.

I added it right in the footer section of the stylesheet.

ANything else?
November 3, 2016 at 9:37 pm #19888
Wes
Moderator
Since that plugin has so many !important declarations, it overrides the code you add in your Theme’s CSS. So to make your custom code has the top priority, you’ll need to override it by adding in something like .footer-widgets-2 right before the code I posted above (since it’s in the Footer Widgets 2 location). Example –
```
.footer-widgets-2 .social-bookmarks li {
    display: inline-block !important;
    float: none !important;			
}
```
You could add other classes or ID’s as well, but let’s try adding .footer-widgets-2 in front of the code I posted earlier and let me know if that works.
November 3, 2016 at 9:48 pm #19889
Robert
Customer
SUCCESS!!! That did it!! You’re the man! Thank you!
November 3, 2016 at 9:55 pm #19890
Wes
Moderator
You’re Welcome!

Let us know if you need anything.
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Footer Widget Align’ is closed to new replies.