Responsive email - when sized to mobile text drops over content below
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">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" href="../../assets/img/icons/foundation-favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width">
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700" rel="stylesheet">
<title>My Hero Template Email Template Subject</title>
</head>
<body>
<span class="preheader"></span>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i
(i
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>
<table class="body">
<tr>
<td align="center" class="center" valign="top">
<center data-parsed="">
<table align="center" class="container float-center">
<tbody>
<tr>
<td>
<table class="spacer">
<tbody>
<tr>
<td height="16px" style="font-size:16px;line-height:16px;background-color: #999999;"> </td>
</tr>
</tbody>
</table>
<table class="row" style="background-color: #999999">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table width="677">
<tr>
<th width="613" height="424">
<img style="margin-bottom: 15px;vertical-align:top"alt="" src="http://offers.premierinc.com/rs/381-NBB-525/images/Join-Premier.jpg">
<table width="743" class="callout" >
<tr>
<th class="callout-inner primary" style="background-color: #ffffff;border:0;">
<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>
<hr width="90%">
<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>
<th class="expander"></th>
</tr>
</table>
<h2> </h2>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<center data-parsed="">
</center>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
AdChoices