Text only content block not staying full width

Ric Faust 0
Viewed 57

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.

salesforce-marketing-cloud css html
1 Answers

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>
Ric Faust0
Related