cssemailtemplatesoutlookaweber

Aweber email template, In outlook the width is messed up

We are trying to make this work in outlook as well, but the solutions I've found online aren't working. The email in outlook has a width about 1500px. Does anyone know a solution? The code is generated in Aweber. We tried many things, but nothing seems to affect the looks in outlook. :(

  <!-- LOGO -->
  <div style="max-width:680px;margin:auto;" class="email-container">
    <!--[if mso]>
    <table style=”word-break: break-all;” cellspacing="0" cellpadding="0" border="0" width="680" align="center">
      <tr>
        <td>
          <![endif]-->
    <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;">
      <tbody><tr>
        <td style="padding:30px 0;text-align:center;" class=""><aw:header></td>
      </tr>
    </tbody></table>
    <!-- BODY -->
    <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;border-radius:3px;overflow:hidden">
      <tbody>
      <!-- 1 Column Text + Button -->
      <tr>
        <td bgcolor="#ffffff">
          <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tbody><tr>
              <td mc:edit="lead_copy" style="padding:40px;font-family:sans-serif;font-size:14px;line-height:22px;color:#555555;" class=""><aw:body></td>
            </tr>
          </tbody></table>
        </td>
      </tr>


      <!-- Clear Spacer -->
      <tr>
        <td height="40" style="font-size:0;line-height:0;" class="">
           
        </td>
      </tr>


      <!-- 3 Cols -->




      <!-- Clear Spacer -->


      <!-- Minuscule -->

    </tbody></table>

    <!-- Email Footer -->
    <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;">
      <tbody><tr>
        <td style="padding:40px 10px;width:100%;font-size:12px;font-family:sans-serif;line-height:18px;text-align:center;color:#888888;" class="x-gmail-data-detectors"><aw:footer></td></tr>
      </tbody></table>
      <!--[if mso]>
    </td>
  </tr>
</table>
<![endif]-->
    </div>
  </center>
Solution

  • Outlook doesn't read the max-width value at all. If you use the max-width in combination with width:100%, that will help. Alternatively, you can use some conditional statements that will help you out with the width handling on different clients. I asked a member of AWeber's template team for you and they suggested these two:

        <!--[if !mso]><!--><table cellpadding="0" cellspacing="0" style="max-width:600px!important; width:100%;"><![endif]-->

    <!--[if gte mso 9]><table cellpadding="0" cellspacing="0" width="600"><![endif]-->

    Having the conditionals will let the width be 100% on mobile devices, which I assume you also want, but be 600 elsewhere.