Email Table Layout - Overlapping text - html

Question

I am using this template: https://mailbakery.com/template-store/product/basic-free-html-email-template/ for an email newsletter. I am having an issue with overlapping text in the testimonial on mobile. I have to have the quotation image which isn't in the jsfiddle but use your imagination lol. I've tried adding white-space: normal, a fixed-width, and word-break, but nothing. The tables have border-collapse: border.
Here is the jsFiddle: https://jsfiddle.net/z5jybrda/
/* Linked Styles */
body {
padding: 0 !important;
margin: 0 !important;
display: block !important;
min-width: 100% !important;
width: 100% !important;
background: #ffffff;
-webkit-text-size-adjust: none;
}
a {
color: #0000ee;
text-decoration: none;
}
p {
padding: 0 !important;
margin: 0 !important;
}
/* Mobile styles */
#media only screen and (max-device-width: 480px),
only screen and (max-width: 480px) {
.table_wrapper {
width: 95%;
}
.mobile-full-width {
width: 100% !important;
}
.mobile-shell {
width: 100% !important;
min-width: 100% !important;
}
.text-header,
.m-center {
text-align: center !important;
}
.m-font-15 {
font-size: 15px !important;
}
.center {
margin: 0 auto !important;
}
.container {
padding: 20px 10px !important;
}
.td {
width: 100% !important;
min-width: 100% !important;
}
.m-br-15 {
height: 15px !important;
}
.p30-15 {
padding: 30px 15px !important;
}
.p0-15-30 {
padding: 0px 15px 30px 15px !important;
}
.p0-15 {
padding: 0px 15px !important;
}
.pb-30 {
padding-bottom: 30px !important;
}
.mpb30 {
padding-bottom: 30px !important;
}
.mpb15 {
padding-bottom: 15px !important;
}
.m-td,
.m-hide {
display: none !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
min-height: 0 !important;
}
.column,
.column-dir,
.column-top,
.column-empty,
.column-empty2,
.column-dir-top {
float: left !important;
width: 100% !important;
display: block !important;
}
.column-empty {
padding-bottom: 30px !important;
}
.column-empty2 {
padding-bottom: 10px !important;
}
.content-spacing {
width: 15px !important;
}
}
#media only screen and (max-width: 310px) {
.button {
width: 195px !important;
}
img.quote {
height: 22px;
width: auto;
}
td.quote {
width: 50px !important;
}
}
<!-- WRAPPER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background: #f4f5f6">
<tr>
<td align="center">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="
width: 650px;
min-width: 650px;
font-size: 0pt;
line-height: 0pt;
padding: 0;
margin: 0;
font-weight: normal;
">
<!-- SPACER -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="30"></td>
</tr>
</table>
<!-- TESTIMONIAL -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background: #877454;">
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td width="20"></td>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td valign="top" width="70" class="quote">
<div><img src="./Newsletters/Images/colon.png" width="50" height="34" alt="quotation" style="display: block;" border="0" class="quote" />
</div>
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td height="10"></td>
</tr>
<tr>
<td style="font-size: 18px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; font-style: italic; line-height: 1.5; " class="m-font-15">Thank you for your excellent leadership and support over the last year. We all greatly appreciate your efforts to steer us all in the right direction.
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td style="font-size: 16px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; ">
<p>
- John Doe recognizing <span style="text-decoration: underline;">John Doe</span>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<td width="30"></td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<!-- END TESTIMONIAL -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I appreciate any help

Answer 1

modifying the line height in the <p> solves the issue (defined in the code you added as line-height:0, which causes the issue)
<p> - John Doe recognizing <span style="text-decoration: underline;">John Doe</span> </p>
would be
<p style="line-height:1em;"> .... </p>

Answer 2

Well this is one of my favorite problems with HTML tables, what is happening to you is due to lack of space in the <td>, if you change td like this:
<td style="font-size: 16px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; line-height: 22px;">
Solved ;)