Responsive email - when sized to mobile text drops over content below

Report · Oct 31, 2017

Hi,

I have an email template with a paragraph thats giving me issues. At first I tried to just add another paragraph below with it's own styling and for some reason the next paragraph jumps about 400px down the page.

So I added a <span instead of a <p and now I'm getting the overlap. Does anyone have any ideas?

Code and screenshot below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>My Hero Template Email Template Subject</title>

</head>

<body>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){

(i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-2195009-2', 'auto');

ga('send', 'pageview');

ga('create', 'UA-2195009-27', 'auto', {name: "foundation"});

ga('foundation.send', 'pageview');

ga('create', 'UA-2195009-47', 'auto', {name: "foundation_emails"});

ga('foundation_emails.send', 'pageview');

</script>

<tr>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tr>

<tr>

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and willingness to help provide strategic direction and tactical input as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span>

<center><a href="http://"

style="background-color:#0099cc;border-radius:0px;color:#ffffff;display:inline-block;font-family: 'PT Serif', serif;font-size:17px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;margin-top:10px;margin-bottom:10px;">RSVP BY November 30*</a><br><p style="text-align: center;font-size: 12px;font-family: 'PT Serif', serif;line-height: 1.4;">*Be sure to include contact information for your executive assistant <br> so we can complete your registration. Travel related expenses to be paid by Premier.

</p><hr width="90%"></p></center>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Questions regarding the Physician Enterprise Collaborative?</b><br>

Contact Kearin Schulte at 720.413. 0064.</p>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Event logistics and/or registration questions?</b> <br>

Contact Tiffany Randolph at 704.816.5696. </p><hr width="90%"></th>

</tr>

</table>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</table>

</body>

</html>

Report · Oct 31, 2017

You must close your paragraph tags. Unbalanced tags will cause overlaps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 31, 2017

It's closed and no luck: see red text.

Is there somehow I can just create a separate <p> instead of using the span and get it to work? Do I need to close the <th or <tr?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>My Hero Template Email Template Subject</title>

</head>

<body>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){

(i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-2195009-2', 'auto');

ga('send', 'pageview');

ga('create', 'UA-2195009-27', 'auto', {name: "foundation"});

ga('foundation.send', 'pageview');

ga('create', 'UA-2195009-47', 'auto', {name: "foundation_emails"});

ga('foundation_emails.send', 'pageview');

</script>

<tr>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tr>

<tr>

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and willingness to help provide strategic direction and tactical input as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span></p>

<center><a href="http://"

style="background-color:#0099cc;border-radius:0px;color:#ffffff;display:inline-block;font-family: 'PT Serif', serif;font-size:17px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;margin-top:10px;margin-bottom:10px;">RSVP BY November 30*</a><br><p style="text-align: center;font-size: 12px;font-family: 'PT Serif', serif;line-height: 1.4;">*Be sure to include contact information for your executive assistant <br> so we can complete your registration. Travel related expenses to be paid by Premier.

</p><hr width="90%"></p></center>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Questions regarding the Physician Enterprise Collaborative?</b><br>

Contact Kearin Schulte at 720.413. 0064.</p>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;"><b>Event logistics and/or registration questions?</b> <br>

Contact Tiffany Randolph at 704.816.5696. </p><hr width="90%"><br><img style="vertical-align:top"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/footer.jpg"></th>

</tr>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</table>

</body>

</html>

Report · Oct 31, 2017

Remove height: 250px from the paragraph inline styling:

<p style="background-color:#ffffff;;height:250px;padding:35px;text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;"><b>January 31st – February 1st</b><br>

Premier Headquarters | Charlotte, NC.<br><br/><span style="font-size: 16px;">As a member of Premier, we value your perspective and willingness to help provide strategic direction and tactical input as we work toward our design and launch. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</span></p>

Report · Oct 31, 2017

WOW! Something so simple. Thanks again.

Report · Nov 01, 2017

Hi osgood,

Would you happen to have any insight on why my hero image isn't full width in outlook? I have display:block;width:100%; set in the inline style for the image. It's also creating a grey bar below the footer. I would guess that the paragraph padding is being affected from the image issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>My Hero Template Email Template Subject</title>

</head>

<body>

.appleLinks p {color:#000000;}

.appleLinks a {color:#000000;}

.appleLinksWhite a {color:#ffffff;}

</style>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){

(i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-2195009-2', 'auto');

ga('send', 'pageview');

ga('create', 'UA-2195009-27', 'auto', {name: "foundation"});

ga('foundation.send', 'pageview');

ga('create', 'UA-2195009-47', 'auto', {name: "foundation_emails"});

ga('foundation_emails.send', 'pageview');

</script>

<tr>

<tbody>

<tr>

<td>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tr>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tr>

<p style="background-color:#ffffff;margin-bottom: 20px;margin-top:35px; padding-left: 35px; padding-right: 35px; text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 18px;letter-spacing: 2px;color:#000000"><b>January 31st–February 1st</b><br>

Premier Headquarters | Charlotte, NC.</p>

<p style="background-color:#ffffff;margin-bottom: 20px;margin-top:35px; padding-left: 35px; padding-right: 35px; text-align: center;font-family: 'PT Serif', serif;line-height: 1.2;font-size: 16px;letter-spacing: 2px;color:#000000">We value your perspective and willingness to help provide strategic direction and tactical input as we work toward the design and launch of our collaborative. Our goal is to design the most effective medical group collaborative in the market to support the quadruple aim, and more specifically, to address the areas that are of the greatest concern and benefit to you.</p>

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:250px;" arcsize="0%" strokecolor="#1e3650" fillcolor="#0099cc">

<w:anchorlock/>

<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">DOWNLOAD NOW</center>

</v:roundrect>

<![endif]--><a class="appleLinksWhite"href=""

style="background-color:#0099cc;border-radius:0px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:14px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;">DOWNLOAD NOW</a></div><br><p style="text-align: center;font-size: 12px;font-family: 'PT Serif', serif;line-height: 1.4;background-color: #ffffff">*Be sure to include contact information for your executive assistant <br>so we can complete your registration. Travel related expenses to be paid by Premier.

</p><hr width="90%"></p></center>

<p style="text-align: center;font-size: 14px;font-family: 'PT Serif', serif;line-height: 1.4;background-color: #ffffff"><b>Questions regarding this event?</b> <br>

Contact Tiffany Randolph at 704.816.5696. </p><hr width="90%"><br><img style="vertical-align:top"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/footer.jpg"></th>

</tr>

</table>

<tbody>

<tr>

</tr>

</tbody>

</table>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</table>

</body>

</html>

Report · Nov 01, 2017

your DOM tree is pretty confusing... you have a TH tag containaing the IMG and as siblings other TABLE... you should use (either if it is a TABLE construction) a more robust container dispatching...

as it appears to be presnted, you have the Join Premier Image Hero that should be on an isolate ROW, the following content on a next ROW and so on...

consider each stage of the content as ROWs dispatched in a COLUMN

so the COLUM is indicated by the TABLE tag, the ROW as the TR tags and the siblings (neighbors in the same level as THs or TDs)

perhaps I missed the bottom line , I haven't red all the previous message... but hope that it will help more than it will confuse you

Report · Nov 01, 2017

Hi there,

Thanks for your input. Yes there is a bunch of crazy stuff going on in this template. It's been a nightmare. Although I'm new to this I get the gist of what your saying. Off to keep learning:)

Report · Nov 02, 2017

if you need help just post your new approach here and we will try to help you. Reading your previous code,

avoid to nest TABLE in within TABLE when it is not needed,
keep your DOM structure as simple as you can,
don't forget as mentionned Nancy to always close your tags,
remove all unusued, or empty TAG

Responsive email - when sized to mobile text drops over content below

1 Correct answer