Skip to content

Instantly share code, notes, and snippets.

@kvann

kvann/social-icons.html

Last active September 14, 2021 17:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kvann/ad056e29d55dbbb79d94ebc7171f2cdd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kvann/ad056e29d55dbbb79d94ebc7171f2cdd to your computer and use it in GitHub Desktop.
Download ZIP
Social icon custom layout for email template. This layout allows for the social icons to be centered aligned and has fixes set so that alignment are rendering properly in Android and iOS. This layout does not collapse and will overwrite any media query collapsing.
Raw
social-icons.html
<!--
/**
* Adjust the outter container width to match the total of all columns in the table
*/
-->
<div class="outter-container" style="display:flex; width:74px!important; max-width:74px!important;">
<center style="margin:0; outline:none; padding:0; font-size:0px;">
<table cellspacing="0" cellpadding="0" align="center" style="font-size:0; min-width:auto!important; mso-table-lspace:0pt; mso-table-rspace:0pt; margin:auto!important; display:table-cell!important; text-align:center!important;">
<tr>
<td align="center" valign="middle" width="32" style="display:table-cell!important; font-size:0; width:32px!important;">
<a href="https://website.com/" style="margin:0; outline:none; padding:0;">
<img src="/path/to/image/filename.png" border="0" width="32" style="border:none; width:32!important; max-width:32!important;">
</a>
</td>
<td width="10" height="10" style="display:table-cell!important; font-size:0; width:10px!important;">&nbsp;</td>
<td align="center" valign="middle" width="32" style="display:table-cell!important; font-size:0; width:32px!important;">
<a href="https://website.com/" style="margin:0; outline:none; padding:0;">
<img src="/path/to/image/filename.png" border="0" width="32" style="border:none; width:32!important; max-width:32!important;">
</a>
</td>
</tr>
</table>
</center>
</div>
@kvann
Copy link
Author

kvann commented Jul 11, 2018

Simply replicate this block of code for more columns and adjust the width accordingly

<td align="center" valign="middle" width="34" style="display:inline-block!important;font-size:0;width:34px!important;">
	...
</td>
<td width="10" style="display:inline-block!important;font-size:0;width:10px!important;">&nbsp;</td>

@kvann
Copy link
Author

kvann commented Aug 15, 2018

Update 08/15/2018
The current version of this code ensures that each image will scale up to its intended (max) width.

<img src=" ..." style="max-width: 34px !important;">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment