how to align my social media buttons

Are all the images for the buttons the same width and height?
…and please don’t “bump” – Forum Welcome ? WordPress Codex

yes they are the same width and height. it’s just that the pinterest button is dislocated

You really should be creating a Child Theme for any changes, as when the theme updates, all the changes will be lost. Or you could use a Custom CSS plugin.

This goes in your text widget::

<div class="my-social-media-buttons-wrap">

<span class="fb-like my-social-media-buttons" data-href="https://www.facebook.com/pageid" data-layout="button" data-action="like" data-show-faces="false" data-share="false" style="overflow: hidden;"></span>

<span class="my-social-media-buttons"><a href="https://twitter.com/pageid" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @username</a></span>

<span class="my-social-media-buttons"><a data-pin-do="buttonFollow" href="https://www.pinterest.com/pageid">Follow</a></span>

<span class="g-follow my-social-media-buttons" data-href="https://plus.google.com/+pageid" data-annotation="none" data-rel="{relationshipType}"></span>

</div>

This goes in your Child Theme or Custom CSS plugin:

.my-social-media-buttons-wrap {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.my-social-media-buttons {
	width: auto;
	height: auto
	margin: 5px;
	display: inline-block;
	vertical-align: top;
}

Hi, bimmerime…

You really should be creating a Child Theme for any changes, as when the theme updates, all the changes will be lost. Or you could use a Custom CSS plugin.

This goes in your text widget::

<div class="my-social-media-buttons-wrap">

<span class="fb-like my-social-media-buttons" data-href="https://www.facebook.com/pageid" data-layout="button" data-action="like" data-show-faces="false" data-share="false" style="overflow: hidden;"></span>

<span class="my-social-media-buttons"><a href="https://twitter.com/pageid" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @username</a></span>

<span class="my-social-media-buttons"><a data-pin-do="buttonFollow" href="https://www.pinterest.com/pageid">Follow</a></span>

<span class="g-follow my-social-media-buttons" data-href="https://plus.google.com/+pageid" data-annotation="none" data-rel="{relationshipType}"></span>

</div>

This goes in your Child Theme or Custom CSS plugin:

.my-social-media-buttons-wrap {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.my-social-media-buttons {
	width: auto;
	height: auto
	margin: 0 5px;
	display: inline-block;
	vertical-align: top;
}

I put a margin in between the buttons for easier access and looks.

Thank you very much man for taking the time to help me. i really appreciate it
i did what you suggested and it did actually improved but it’s just not quite there
here’s a screenshot https://postimg.org/image/5qyw4diu9/
the first one is before and the second one is after

i tried to adjust the margin but nothing changed. any suggestions?

Thanks again

Change “vertical-align: top;” to “vertical-align: bottom;”

Where did you get these buttons from?

i followed this tutorial

https://blog.hubspot.com/blog/tabid/6307/bid/29544/The-Ultimate-Cheat-Sheet-for-Creating-Social-Media-Buttons.aspx

by the way it’s still slightly unaligned but thanks anyway it’s better than it was before

You could try Change “vertical-align: bottom;” to “vertical-align: middle;” to see if they line up better.

That is a good tutorial. Thanks for turning me on to it. ??