Two Button Stacking in Mobile

These two buttons are side-by-side in a window wider than 600px and stack under 600px. This is meant for email clients and works with IOS, Gmail, Outlook and other popular clients.

by Wally Glenn

HTML

<table>
  <tr>
    <td class="stack-in-mobile">
		<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
			<tr>
				<td style="border-radius: 6px; background: #24b646;">
					<a href="#" target="_blank" style="background: #24b646; border: 1px solid #24b646; font-family: sans-serif; font-weight: bold; font-size: 14px; line-height: 15px; text-decoration: none; padding: 13px 22px; color: #ffffff; display: block; border-radius: 6px; letter-spacing: 1px;">Manage Team</a>
				</td>
			</tr>
		</table>
    </td>
    <td class="stack-in-mobile">
		<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
			<tr>
				<td style="border-radius: 6px; background: #ffffff;">
					<a href="#" target="_blank" style="background: #ffffff; border: 1px solid #24b646; font-family: sans-serif; font-weight: bold; font-size: 14px; line-height: 15px; text-decoration: none; padding: 13px 12px; color: #24b646; display: block; border-radius: 6px; letter-spacing: 1px;">Billing Overview</a>
				</td>
			</tr>
		</table>
    </td>
  </tr>
</table>

CSS

@media screen and (max-width: 600px) {
	    .stack-in-mobile {
	      display: block !important;
		  width: 100% !important;
		  max-width: 100% !important;
	    }
	  }