Strange subhead showing in email client

Hi Brandon,


Most email clients display the first line of text in an email in the preview pane. So you'll want to look through the code to see where that is displaying as it's not always the first line of viewable text, sometimes it can be alt text or other attributes.


Once you find where it lives, you can either update that text for each send or you create what is called "pre header" or "preview text" so you can control what is displayed in the preview. This is hidden text placed just after the body tag. Here's an example where the pre header is set to not display to the recipient but will show in the email preview pane:


<div style="display:none;font-size:1px;color:#{color};line-height:1px;font-family:{font};max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">

    Pre headerPreview text here

</div>


In the example, you would set the color to the background color of your email and set the fonts to those in use in the email.


Good luck!

Erik



 

Hi Brandon,


Erik and Jeremy are spot on. This is the preheader text. It is basically another way to get your email recipient to open your email. It usually compliments your subject line.


Our code is like this:


<!-- Visually Hidden Preheader Text : BEGIN -->

        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: Tahoma, Calibri, Arial, Candara, Segoe, 'Segoe UI', sans-serif;">

            Celebrate your birthday, run a 5K or start a virtual fundraiser for the patients at Lurie Children's

        </div>

        <!-- Visually Hidden Preheader Text : END -->


        <!-- Create white space after the desired preview text so email clients don't pull other distracting text into the inbox preview. Extend as necessary. -->

        <!-- Preview Text Spacing Hack : BEGIN -->

        <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: Tahoma, Calibri, Arial, Candara, Segoe, 'Segoe UI', sans-serif;">

            &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;

        </div>

        <!-- Preview Text Spacing Hack : END -->


If your preheader is short, the &zwnj; will help add spaces in order to not pull the first bit of copy from your email or the alt tag if you have an image as the first part of your email.


Let us know if all this info helps!


Phil