leemunroe/responsive-html-email-template

Pre header text indent in Outlook 2016

mjmgooch opened this issue · 4 comments

mjmgooch commented

Hello,

I ran across a minor formatting issue in Outlook 2016 where the preheader text was indented in the outlook message preview.

I fixed it by simply moving the pre header span above the table.

Before:

<body class="">
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&nbsp;</td>
        <td class="container">
          <div class="content">

            <!-- START CENTERED WHITE CONTAINER -->
            <span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
            <table role="presentation" class="main">

After:

<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&nbsp;</td>
        <td class="container">
          <div class="content">

            <!-- START CENTERED WHITE CONTAINER -->
            <table role="presentation" class="main">
leemunroe commented

@mjmgooch Wow, great catch. Can you share a before/after screenshot?

mjmgooch commented

@leemunroe Here you go:

Before and after

leemunroe commented

I think this sounds good. Do you want to make the change to email.html and email-inlined.html and create a PR so I can approve? That way you get the contribution. If you'd prefer not to I can do it.

leemunroe commented

Fixed