LP0
Gmail Android not Aligning on Mobile
I am trying to get these three social icons to space out equally for mobile. This code is working literally everywhere else but Gmail (Android). Is there something I'm missing?
<!-- START 3 Column with Images Stacked over Text -->
<table width="600" width="100%" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff" style="max-width:100%; display: block">
<tr>
<td valign="top" style="display: block">
<div style="font-size: 20px; line-height: 20px;"><hr size="2" color="#C0C0C0" /></div>
<div style="font-size: 10px; line-height: 10px;"> </div>
<!-- START Feature 1 -->
<table width="33%" align="left" cellpadding="0" cellspacing="0" valign="top" style="max-width: 100%">
<tr>
<td valign="top" align="center" style="padding:0 5px 0px 10px;">
<img src="http://image.familysearch.ldschurch.org/lib/fe6315707166057a711d/m/2/WWIE---Facebook.png" alt="" border="0"
style="font-size:0px;mso-line-height-rule:exactly;line-height:0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
</td>
</tr>
</table>
<!-- END Feature 1 -->
<!-- START Feature 2 -->
<table width="33%" align="left" cellpadding="0" cellspacing="0" valign="top" style="miax-width: 100%">
<tr>
<td valign="top" align="center" style="padding:0px 0px 10px 0px; display: block">
<img src="http://image.familysearch.ldschurch.org/lib/fe6315707166057a711d/m/2/WWIE---twitter.png" alt="" border="0"
style="font-size:0px;mso-line-height-rule:exactly;line-height:0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
</td>
</tr>
</table>
<!-- END Feature 2 -->
<!-- START Feature 3 -->
<table width="33%" align="center" cellpadding="0" cellspacing="0" valign="top" style="max-width: 100%">
<tr>
<td valign="top" align="center" style="padding:0px 0px 10px 0px; min-width: 100%; display: block;">
<img src="http://image.familysearch.ldschurch.org/lib/fe6315707166057a711d/m/2/WWIE---instagram.png" alt="" border="0"
style="font-size:0px;mso-line-height-rule:exactly;line-height:0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
</td>
</tr>
</table>
<!-- END Feature 3 -->
<!-- END 3 Column with Images Stacked over Text -->
<!-- /.End Section #3 -->
Hey Logan,
Give the following code a try :
could it be the "miax-width: 100%" misspelling on the table right after "<!-- START Feature 2 -->"?
Hi Logan,
When I take your code and put it into an HTML file (with nothing else) and look at in a browser, the 3rd social icon is falling below the first 2. When I removed
display:block;from the container<table>that has the 600px width, they then went side by side into 3 columns. I don't think you should needdisplay:block;on the<table>or the<td>immediately after it.