I'm coding for Salesforce Marketing Cloud and realized that if my text is a headline of just a few words the content block doesn't remain at 100% width; it shrinks to fit the text on the Gmail native client on iPhone. Here's the code for the content block:
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; text-align: center; -ms-text-size-adjust: 100%; -moz-text-size-adjust: none; -webkit-font-smoothing: antialiased; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0; border-collapse: collapse!important;">
<tr>
<td width="100%" align="center" style="padding: 20px 20px 20px 20px; background-color:#D39F10;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td width="100%" align="center" style="font-family: Arial, Helvetica, sans-serif; color: #3A484D; mso-line-height-rule: exactly;" valign="top">
<p style="margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22px; mso-line-height-rule: exactly; line-height: 22px; color: #FFFFFF;">
IMPORTANT NOTICE</p></td></tr></table></td></tr>
</table>
Hopefully someone can spot my error. Thank you.
Fixed it using max-width and removing some mso code. This also works when the mobile device is rotated. I hope it can help others:
<table cellpadding="0" cellspacing="0" style="width:100%; max-width:1440px; margin: 0 auto; mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px" width="100%">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0; Margin:0; width:1440px; padding: 20px 20px 20px 20px; background-color:#D39F10;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%; max-width:1440px; margin: 0 auto; mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0; margin:0;">
<p style="margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22px; mso-line-height-rule: exactly; line-height: 22px; font-style:normal; font-weight:bold; color: #FFFFFF;">
IMPORTANT NOTICE</p></td></tr></table></td></tr>
</table>