Consistent Social Media Buttons - html

Question

I am building a website that has the usual social media links in a footer on my page:
They are hosted in an HTML element coded as:
<div class="social">
<table>
<tr>
<td>Tweet </td>
<td>
<div
class="fb-like"
data-href="#Context.Request.Scheme://#Context.Request.Host.ToString()#Context.Request.PathBase#Context.Request.Path"
data-layout="button"
data-action="like"
data-show-faces="true">
</div>
</td>
<td>
<script type="IN/Share" data-counter="right">
</script>
</td>
<td><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"><img alt="Pin it" src="//assets.pinterest.com/images/pidgets/pin_it_button.png" border="0" /></td>
</tr>
</table>
</div>
How can I force the alignment or padding of the buttons to be consistent?
Alternatively, if I want to use my own icons and hide these is there a standard approach to doing that?
Thanks
Mark

Answer 1

The way this is constructed is wrong! Please use table for data and not for styling. Change it to a div and you'll find that making it mobile responsive is easy.
Try to nest the divs so you can just move your main div and all the sub-divs within it moves along.
Try something like this:
.social { display: inline-block; }
<div id="social-icons">
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
</div>
And to make changes when viewing from a smaller screen - eg; mobile, then use media queries to align the content when a certain device size is reached.
Media Query CSS:
#media screen and (max-width: 480px) {
.social {
display: block;
width: 100%;
}
}
Of course, change the css styling to whichever you prefer.

Answer 2

I would use flex instead of a table layout. Set the parent element to display: flex; and align-items: top;. That forces the direct children of .social to align at the top.
.social {
display: flex;
align-items: top;
}
.social a {
padding: 5px 10px;
margin: 5px;
background-color: yellow;
}
<div class="social">
Facebook
Instagram
Pinterest
Twitter
</div>

Answer 3

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social">
<table>
<tr>
<td>
<button type="button" class="btn btn-info">
<i class="fa fa-twitter" aria-hidden="true"></i>
Tweet </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Like </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Share </button>
</td>
<td>
<button type="button" class="btn btn-danger">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Save </button>
</td>
</tr>
</table>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>