Text Won't Align with Buttons Horizontally

Just wanted to follow up + see if anyone had a fix for this yet?

Thanks! ??

You can simply goto styling option and then click on custom css and paste the following css code. It will align the buttons with the counters.

.ssba img
{
width: 45px  !important;
padding:0 8px;
border: 0;
box-shadow: none !important;
display: inline;
vertical-align: middle;
 margin-top: 22px;
}

.ssba, .ssba a
{
font-family: Indie Flower;
font-size: 20px;
text-decoration: none;
}

Many apologies that your question went so long unanswered. Please do let me know if the suggestion above worked for you, I shall try and assist you in getting it sorted asap if not.

Thanks,

David

Hi David!

Thanks so much for your response.

Nope… it’s still not fixed.

Even though the social buttons are next to the words (horizontally) – they’re still slightly offset.

Thanks! ??

Hey,

No worries at all, apologies again!

It does seem to be linked to your theme somehow, but we can override that ??

Are you currently using the suggestion above? Reason I ask is if you enter any custom CSS at all it overrides any settings applied in the styling section.

This CSS should do the trick for you:

.ssba img {
margin-top: -10px;
}

https://xomf.com/zycyj

David

By the way, in case you weren’t aware…

You can use this free tool I made to make custom-coloured share buttons if you like https://make.simplesharebuttons.com/

If you select ‘Custom’ from the image set dropdown in the dashboard some upload options will appear ??

Thanks! ??

Ok, I just added a combo of your’s + reihaan1’s code into the Custom CSS area.

I’m having 2 issues…

1. I can’t seem to get the font color to change to #FDC7D0.
2. How can I create a little more white space above + below the whole thing?

And… now, I know I’m asking a lot, Lol – but I just figured I’d ask since I’ve always wondered + I have you here… how can I move my Simple Share Buttons above my n-Relate plugin? (So that at the end of my posts, my share buttons come first, then my n-relate content.)

Thanks David! I really appreciate your help! ??

No worries ??

1. A small correction required in your CSS:

font-color should be color

2. within .ssba, add margin: 10px 0 10px;

Please note that the margin-top mentioned previously will need to be amended accordingly. If you add the 10px mentioned above for example, the margin-top will need to be set to about 2px instead of -10px.

Sorry that it’s working out a little fiddly for you, but sometimes it’s necessary to get things just right ??

Hey David!

Ok, that fixed the spacing… but no matter what I do, the font color won’t change ??

Any other suggestions?

Here’s the code I have in there now:

.ssba img
{
width: 44px  !important;
padding:0 6px;
border: 0;
box-shadow: none !important;
display: inline;
vertical-align: middle;
margin-top: 2px;
}

.ssba, .ssba a
{
font-family: sans-serif;
font-size: 28px;
font-weight: 700;
font-color: #FDC7D0;
text-decoration: none;
margin: 10px 0 10px;
}

Thanks! ??

Great! Almost there!

Please note point one in my previous comment – font-color should be color ??

Haha… Got it!

I totally read that wrong, Lol.

I thought I had “color” in the coding + it needed to be “font-color”.

Thanks for your help! ??

You’re welcome, great to see it working as you wanted ??