I have the following html in an email template.
I am getting different view in MS Outlook and in Gmail for the same.
<tr>
<td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>
In Gmail
In Outlook
How to fix this?
I changed to following and it worked for me
<tr>
<td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
<table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">
<td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
<td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
</table>
</td>
</tr>
Update based on Bsalex request what has actually changed. I replaced span tag
<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>
with table and td tags as following
<table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">
<td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
<td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
</table>