I have created a mail in Mandrill, and i am trying to create a button.
All email clients show the button correct, however if you view it in outlook 365 for mac on a macbook air (small screen), the button breaks. Viewing the email on my macbook pro (bigger screen) does not make it break.
Screenshot from the macbook air:
Screenshot
I have tried making the button with padding, with height, min-width, and now this with seperate td's for spacing.
<tr>
<td class="min-width" style="min-width: 640px;">
<!-- LOGO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #040229;">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="height:50px;"> </td>
</tr>
<tr>
<td align="center">
<img alt="USA TOURS" src="https://usatours.dk/themes/custom/usatours/scss/assets/img/usatours_logo.png" height="70" style="width:305px; display: block; border: 0; height: 70px; color: #ffffff; font-family: arial, sans-serif; font-weight:bold; font-size:20px; line-height:36px; padding-right:20px"/>
</td>
</tr>
<tr>
<td style="height:50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LOGO -->
{{#if greeting }}
<!-- GREETING -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td colspan="3" style="height:50px;"> </td>
</tr>
<tr>
<td style="width:20px;"> </td>
<td align="left" style="mso-ascii-font-family: 'Helvetica', Arial, sans-serif; font-size:20px; font-family: 'Formular', 'Roboto', 'Helvetica', Arial, sans-serif; color:#040229; ">
{{ greeting }}
</td>
<td style="width:20px;"> </td>
</tr>
<tr>
<td colspan="3" style="height:20px;"> </td>
</tr>
<tr>
<td style="width:20px;"> </td>
<td align="left">
<table cellspacing="0" cellpadding="0" border="0" style="width:100px;">
<tr>
<td align="center" style="height: 6px; background-color:#F51912; font-size:1px; mso-line-height-rule:exactly; line-height:1px;">
</td>
</tr>
</table>
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:20px;"> </td>
</tr>
</table>
<!-- GREETING -->
{{/if}}
<!-- INTRO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left" style="mso-ascii-font-family: 'Helvetica', Arial, sans-serif; font-size:12px; font-family: 'Formular', 'Roboto', 'Helvetica', Arial, sans-serif; color:#040229;">
{{#each introLines }}
{{{ this }}}
{{/each}}
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:40px;"> </td>
</tr>
</table>
<!-- INTRO -->
{{#if actionUrl}}
<!-- ACTION -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left" style="display:inline-block;">
<table cellspacing="0" cellpadding="0" border="0" style=" background-color: #F51912;">
<tr>
<td colspan="3" style="height:10px; font-size:1px; mso-line-height-rule:exactly; line-height:1px;"> </td>
</tr>
<tr>
<td style="width:20px;"> </td>
<td align="center" style="background-color:#F51912; min-width:150px;">
<a href="{{actionUrl}}" style="mso-ascii-font-family: 'Helvetica', Arial, sans-serif; color:#ffffff; font-family: 'Formular-bold', 'Roboto', 'Helvetica', Arial, sans-serif; text-transform:uppercase; font-size:13px; line-height: 30px; text-decoration:none;">{{actionText}}</a>
</td>
<td style="width:20px;"> </td>
</tr>
<tr>
<td colspan="3" style="height:10px; font-size:1px; mso-line-height-rule:exactly; line-height:1px;"> </td>
</tr>
</table>
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:40px;"> </td>
</tr>
</table>
<!-- ACTION -->
{{/if}}
{{#if outroLines}}
{{#each outroLines}}
<!-- OUTRO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left" style="mso-ascii-font-family: 'Helvetica', Arial, sans-serif; font-size:12px; font-family: 'Formular', 'Roboto', 'Helvetica', Arial, sans-serif; color:#040229;">
{{{ this }}}
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:40px;"> </td>
</tr>
</table>
<!-- OUTRO -->
{{/each}}
{{/if}}
{{#if salutation}}
<!-- SALUTATION -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left" style="mso-ascii-font-family: 'Helvetica', Arial, sans-serif; font-size:12px; font-family: 'Formular', 'Roboto', 'Helvetica', Arial, sans-serif; color:#808080;">
{{{salutation}}}
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height:15px;"> </td>
</tr>
</table>
<!-- SALUTATION -->
{{/if}}
<!-- END LOGO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table class="w-100" cellspacing="0" cellpadding="0" border="0" style="width: 640px;">
<tr>
<td style="width:20px;"> </td>
<td align="left">
<table cellspacing="0" cellpadding="0" border="0" style="background-color: #040229;">
<tr>
<td colspan="3" style="height:40px;"> </td>
</tr>
<tr>
<td style="width:20px;"> </td>
<td align="center">
<img alt="USA TOURS" src="https://usatours.dk/themes/custom/usatours/scss/assets/img/usatours_logo.png" height="50" style="color: #ffffff; font-family: arial, sans-serif; font-weight:bold; font-size:20px; line-height:36px; width:218px; display: block; border: 0; height: 50px;"/>
</td>
<td style="width:35px;"> </td>
</tr>
<tr>
<td colspan="3" style="height:40px;"> </td>
</tr>
</table>
</td>
<td style="width:20px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="height:40px;"> </td>
</tr>
</table>
<!-- END LOGO -->
</td>
</tr>
</table> ```