Develop Reference

Table row on Android 6 is not taking 100% width

I have the code below used in an html email and it's working as expected in all email clients, except Android 6.0 Gmail! the blue contact us button is not taking 100% of the width.
Any thoughts?
First screenshot shows how it looks like on real device, while the second one is from litmus which is not correct, but this is what I'm trying to make look like.
The code:
.cta {
text-align: left;
vertical-align: middle;
}
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#00a5c9; font-weight: normal;">
<tr>
<td class="cta" style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; padding: 10px; color: #FFFFFF; vertical-align: top; line-height: normal !important;">
<a style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">CONTACT US</a>
</td>
<td style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="http://via.placeholder.com/25/0f0" /></td>
</tr>
</table>
</td>
</tr>
</table>

A good way around this is the force Android 5.1 & 6.0 to display the desktop version of your email. The code snippet below needs a 600x1 transparent png to act as a full width spacer. This spacer will be hidden on all mobile clients that support media queries and allow the mobile view to render.
<tr style="line-height: 1px; mso-line-height-rule: exactly;" class="mobilehide">
<td align="center" style="min-width:600px;font-size:1px; line-height: 1px; mso-line-height-rule: exactly;">
<img src="images/android-spacer.png" alt="" width="600" height="1" style="display: block;" border="0">
</td>
</tr>
This should be added before the closing tag of your outermost table (last one before the closing body)
</td>
</tr>
<!-- add here -->
</table>
</body>
</html>

Instead of using width: 100%;, try using width: 100vw;

Certain versions of Android and Gmail do not use media queries.
https://www.campaignmonitor.com/css/media-queries/media/
This is why the blue contact button only takes up 1/3 of the Android screen, but it takes up 100% of the screen on IOS devices. IOS will respect the media query and Android will use the width="33%" from the table:
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
Since you will not post the rest of your code as expected on Stack Overflow, I cannot offer a suggestion for a workaround because I'm not sure what you're trying to do. At least you now know why it isn't working.
Good luck.

Outlook HTML Signature in GMail App: Gap between <td> Elements

I am facing a strange behavior of the GMail App on Android when displaying an HTML Signature created with Outlook 2017 from Mac OS.
First of all, here is what I did:
I created an HTML signature with a simple table layout and opened in a Browser
I copied the content from the Browser Window into the Signature Panel in Outlook (Outlook -> Settings -> Signature)
I kept the original formatting after pasting the content
Now the Signature basically looks fine in the Browser, Outlook on Mac and in the iPhone standard Mail App. In Gmail on Android there are very large gaps between the table rows and I cannot find any way to control them. Of course I dod some research and ended up with recommendations discussed here and here amongst many other sources. The formatting issues have been adressed in Google Forums. Some People were able to break it down to a specific CSS class MsoNormal added by Outlook, however they are all quite old and the suggestions do not seem to work out for me. I have tried a lot of stuff and ended up with three different versions all with the same or similar results.
The first version uses divs inside the table to structure the text:
<table style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody>
<tr>
<td>
<img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top; line-height:0;' />
</td>
<td style='width:5px'></td>
<td style='vertical-align:top;'>
<div style='font-size: 11px; margin:0px; padding:0px;'>
Peter Pan<br>
Chief Executive Officer<br>
<b>The Company</b>
</div>
<div style='font-size: 9px; margin:0px; padding:0px;'>
Reach me at:<br>
peter#thecompany.com<br>
+00 324 244 20
</div>
<div style='font-size: 9px; margin:0px; padding:0px;'>
...or visit me at:<br>
My Office<br>
Office Street Nr.<br>
44556 Officetown
</div>
</td>
</tr>
</tbody>
</table>
The second uses a table within the table:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p.MsoNormal {
margin: 0px !important;
}
</style>
</head>
<body>
<table class='tbl' style='min-width:300px; font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody class='tbl_body'>
<tr class='tbl_tr' style="display: block; white-space: nowrap;">
<td class='tbl_td' style="line-height:0; display: inline-block;"><img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' /></td>
<!--<td style='width:5px; display: inline-block;'></td>-->
<td class='tbl_td' style='vertical-align:top; display: inline-block;'>
<table class='tbl' style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody class='tbl_body'>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'>
<td class='tbl_td' style="display: inline-block;">Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td>
</tr>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap; '>
<td class='tbl_td' style="display: inline-block;">Reach me at:<br>peter#thecompany.com<br>+00 324 244 20</td>
</tr>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'>
<td class='tbl_td' style="display: inline-block;">...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
And finally I used a 3 x 2 table layout with the image spanning 3 rows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p.MsoNormal {
margin: 0px !important;
}
</style>
</head>
<body>
<table style='font-family:Arial; cellspacing:0; cellpadding:0; border:0; border-collapse: collapse; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody>
<tr style='margin:0px; padding:0px;'>
<td rowspan="3" style='line-height:0'>
<img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' />
</td>
<td style='font-size: 11px; margin:0px; padding:0px;'>Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td>
</tr>
<tr style='margin:0px; padding:0px;'>
<td style='font-size: 11px; margin:0px; padding:0px;'>Reach me at:<br>peter#thecompany.com<br>+00 324 244 20</td>
</tr>
<tr style='margin:0px; padding:0px;'>
<td style='font-size: 11px; margin:0px; padding:0px;'>...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td>
</tr>
</tbody>
</table>
</body>
In GMail the results for the table approaches look somewhat like this:
And the div approach somewhat like this:
As you can see there are large gaps between the text boxes, although there is no margin, padding, cellspacing or whatsoever.
I have fiddled around with CSS a lot and didn't come up with any solution.
I hope someone can help.
Regards,
Markus

First of all, did you try to use <meta name="viewport" content="width=device-width" /> in your head section ?
Then, did you also try to reduce the line-height of your <td>, or wrap all your informations in one <td> markup, and put some <br> break in it ?
Hope it's help.
Chaaampy.

Simple GRID layout for mobile app tile home page CSS + HTML only

I want to have a grid layout on my mobile app homepage and I want to do it without using 3rd party libraries.
I found some examples online but they all seem to have on flaw: the height of them is fixed, as in my case, i would like to have the height and width of the whole thing to have the actual full screen real estate of the mobile that is running on.
How I want it to look on all platforms:
The above image is a lucky scenario where everything lines up, but as soon as I add the png images into the tiles, it gets off.
Here's my attempt:
.tileCollector {
padding-left:3px;
padding-right:3px;
width: 100%;
height:100%;
table-layout: fixed;
}
.homepageStatus {
background-color: #4d82b8; /*var(--color5);*/
height:100%;
padding:30px;
}
.StatusMessage1 {
display:block;
padding-left: 1.0vh;
font-size: calc(1em + 5vmin);
line-height:1.5em;
white-space:nowrap;
font-family: 'Open-Sans';
color:white;
}
.StatusMessage2 {
display:block;
padding-left: 1.0vh;
font-size: calc(1em + 5vmin);
line-height:1.5em;
white-space:nowrap;
font-family: 'Open-Sans';
color:white;
}
.StatusMessage3 {
display:block;
padding-left:1.0vh;
font-size: calc(1em + 5vmin);
line-height:1.5em;
white-space:nowrap;
font-family: 'Open-Sans';
color:white;
}
.tileIcon {
padding-top:30px;
color:white;
height:50%;
}
.tileContainer {
padding:5px;
}
.tile {
font-size: 30px;
color:white;
width: 100%;
height: 100%;
}
div#tileTopLeft {
background-color: #FFC000; /*var(--color1);*/
}
div#tileTopRight {
background-color: #92D050; /*var(--color2);*/
}
div#tileBottomLeft {
background-color: #A6A6A6; /*var(--color3);*/
}
div#tileBottomRight {
background-color: #FF5050; /*var(--color4);*/
}
.tile-icon-label {
font-family:'Oswald';
}
<table class="tileCollector">
<tr colspan=2 height="40%">
<td colspan=2 class="tileContainer" id="StatusContainer">
<div id="homepageStatusDiv" class="homepageStatus">
<span class="StatusMessage1">Message 1</span>
<span class="StatusMessage2">Message 2 </span>
<span class="StatusMessage3">Message 3</span>
</div>
</td>
</tr>
<tr height="30%" >
<td class="tileContainer">
<div class="tile" id="tileTopLeft" ng-click="">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon1.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 1</span>
</td>
</tr>
</table>
</div>
</td>
<td class="tileContainer">
<div class="tile" id="tileTopRight">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon2.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 2</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr height="30%">
<td class="tileContainer">
<div class="tile" id="tileBottomLeft">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon3.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 3</span>
</td>
</tr>
</table>
</div>
</td>
<td class="tileContainer">
<div class="tile" id="tileBottomRight">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon4.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 4</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Also, there would be PNG images inside every tile, right in the middle, above the "Option #" text. I would like these also to be resizable and responsive as well as the text.
Is that possible?
Should I totally ditch the table idea and go with divs, or there's no actual difference?

I think flexboxgrid could be your solution. You can read/learn more about the grid here: http://flexboxgrid.com/ :) Good luck!

HTML on Outlook for Android not showing buttons as expected

I am creating an HTML Email template following the next one: transactional html email templates and in particular: this one.
I have inlined my css using zurb foundation inliner, and hosted the template on SendGrid.
Inline HTML/CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta name="viewport" content="width=device-width" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<title style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">Alerts e.g. approaching your limit</title>
</head>
<body style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:1.6;margin:0;padding:0;width:100%!important">
<style type="text/css">
#media only screen and (max-width:640px) {
h1,
h2,
h3,
h4 {
font-weight: 600!important;
margin: 20px 0 5px!important
}
h1 {
font-size: 22px!important
}
h2 {
font-size: 18px!important
}
h3 {
font-size: 16px!important
}
.container {
width: 100%!important
}
.content,
.content-wrapper {
padding: 10px!important
}
.invoice {
width: 100%!important
}
}
</style>
<table class="body-wrap" style="background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;width:100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
<td class="container" style="box-sizing:border-box;clear:both!important;display:block!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto!important;max-width:600px!important;padding:0;vertical-align:top"
width="600">
<div class="content" style="box-sizing:border-box;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto;max-width:600px;padding:20px">
<table cellpadding="0" cellspacing="0" class="main" style="background:#fff;border:1px solid #e9e9e9;border-radius:3px;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="alert alert-warning" style="background:#ff9f00;border-radius:3px 3px 0 0;box-sizing:border-box;color:#fff;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;margin:0;padding:20px;text-align:center;vertical-align:top">Warning: You're approaching your limit. Please upgrade.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-wrap" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;vertical-align:top">
<table cellpadding="0" cellspacing="0" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">You have <strong style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">1 free report</strong> remaining.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Add your credit card now to upgrade your account to a premium plan to ensure you don't miss out on any reports.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top"><a class="btn-primary" href="http://www.mailgun.com" style="background-color:#348eda;border:solid #348eda;border-radius:5px;border-width:10px 20px;box-sizing:border-box;color:#FFF;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;line-height:2;margin:0;padding:0;text-align:center;text-decoration:none;text-transform:capitalize">Upgrade my account</a></td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Thanks for choosing Acme Inc.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="box-sizing:border-box;clear:both;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;width:100%">
<table style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="aligncenter content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0 0 20px;text-align:center;vertical-align:top">Unsubscribe from these alerts.</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
</tr>
</tbody>
</table>
</body>
</html>
When I send it to Gmail:
When I send it to outlook (problem):
Question: How could I fix the button to look on Outlook for Android like intended?
Note that this doesn't happen on Desktop Outlook application, nor the outlook application for iOS.

There are a few different ways to add buttons to email using html, you can read more about the best ways here
I used a nested table padding approach which will work for outlook mobile, code below. Please bare in mind that this will only make the actual link clickable and not the whole button.
If you absolutely need the whole button to be clickable, use one of the other methods in the linked page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta name="viewport" content="width=device-width" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<title style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">Alerts e.g. approaching your limit</title>
</head>
<body style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:1.6;margin:0;padding:0;width:100%!important">
<style type="text/css">
#media only screen and (max-width:640px) {
h1,
h2,
h3,
h4 {
font-weight: 600 !important;
margin: 20px 0 5px !important;
}
h1 {
font-size: 22px !important;
}
h2 {
font-size: 18px !important;
}
h3 {
font-size: 16px !important;
}
.container {
width: 100% !important;
}
.content,
.content-wrapper {
padding: 10px !important;
}
.invoice {
width: 100% !important;
}
}
</style>
<table class="body-wrap" style="background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;width:100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
<td class="container" style="box-sizing:border-box;clear:both!important;display:block!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto!important;max-width:600px!important;padding:0;vertical-align:top"
width="600">
<div class="content" style="box-sizing:border-box;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto;max-width:600px;padding:20px">
<table cellpadding="0" cellspacing="0" class="main" style="background:#fff;border:1px solid #e9e9e9;border-radius:3px;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="alert alert-warning" style="background:#ff9f00;border-radius:3px 3px 0 0;box-sizing:border-box;color:#fff;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;margin:0;padding:20px;text-align:center;vertical-align:top">Warning: You're approaching your limit. Please upgrade.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-wrap" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;vertical-align:top">
<table cellpadding="0" cellspacing="0" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">You have <strong style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">1 free report</strong> remaining.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Add your credit card now to upgrade your account to a premium plan to ensure you don't miss out on any reports.</td>
</tr>
<tr>
<td>
<table width="185" style="Margin:0;border-spacing:0;max-width:185px;">
<tr>
<td width="100%" style="padding:15px 5px 17px 5px;border-radius:4px;background-color:#348eda;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:bold;color:#ffffff;text-align:center;vertical-align:top;">
<a href="http://www.mailgun.com" style="text-decoration:none;color:#ffffff;display:block;">
Upgrade My Account
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Thanks for choosing Acme Inc.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="box-sizing:border-box;clear:both;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;width:100%">
<table style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="aligncenter content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0 0 20px;text-align:center;vertical-align:top">Unsubscribe from these alerts.</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
</tr>
</tbody>
</table>
</body>
</html>

This is how I fixed the problem.
Outlook for Android was not centering my button. This code was centered in every other email client. My email width is 580px. I added margin: 0; Margin-right: 190px; Margin-left: 190px; to the table in-line style.
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 200px; padding: 0px; margin: 0; Margin-right: 190px; Margin-left: 190px;">
<tr align="center">
<td bgcolor="#ffffff" align="center" width="200" class="center button large-button" style="padding: 8px; margin: 0;">
<p style="text-align: center; color: #6f5a95 !important; padding: 0px; margin: 0;">
View new plans </p>
</td>
</tr>
iPhone 5 and 6 shifted to the left, so I added margin: 0px which caused them to ignore the Margin with a capital M. Margin with a capital M gets picked up by Outlook, but ignored by most major email clients.

Android HTML Form - MAILTO Error

So I've been working on adding a basic table with a form to an Android app, and so far everything has been working fine except on submission. When I hit submit, I get an error and no app opens to send the email. This worked fine on Windows 10 and opened the mail client, so I'm wondering how to fix it. Here is my table/form code (Sorry for the length):
<table border="1" cellspacing="0" bgcolor="lightgrey" bordercolor="black" width="75">
<tbody>
<form action="php-form-processor.php" method="post">
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Name:</u>
</td>
<td>
<textarea rows="1" cols="33" name="Name" style="color: black; background-color: lightgrey; border-color:black; text-align: left; font-
family: Comic sans MS;">Enter your name</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Date:</u>
</td>
<td>
<textarea rows="1" cols="33" name="Date" style="color: black; background-color: lightgrey; border-color: black; text-align: left; font-
family: Comic sans MS;">Enter the date</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Exercise:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Exercise" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter exercise and time spent on each</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Breakfast:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Breakfast" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter your breakfast meal</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Lunch:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Lunch" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter your lunch meal</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Dinner:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Dinner" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter your dinner meal</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Snacks:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Snacks" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter any snacks</textarea>
</td>
</tr>
<tr>
<td style="text-align:center" colspan="2">
<input type="submit" style="font-family:Comic sans MS;font-weight:600" value="Submit Form">
</td>
</tr>
</form>
</tbody>
</table>
So what do you guys think?
UPDATE
I've since discovered that the error comes up when I set method="post", and when I set method="GET", nothing happens at all. Hopefully this will help to identify and fix the problem.
ERROR MESSAGE
Here is a pic of the error I get
This picture is with method attribute set to "post" and enctype set to "text/plain".