Thanks your your suggestion! It didn't work, unfortunately.
This is the HTML, I'm placing it in the code field in the status templates [myurl]/wp-admin/admin.php?page=wpdiscuz_options_page&wpd_tab=subscription#wpd-comment-status-templates
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>Your Comment on "[POST_TITLE]" (MEDA Website)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<xml><w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word"><w:DontUseAdvancedTypographyReadingMail/></w:WordDocument>
<o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet" type="text/css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0px;
overflow: hidden;
}
.image_block img+div {
display: none;
}
sup,
sub {
font-size: 75%;
line-height: 0;
}
@media (max-width:620px) {
.mobile_hide {
display: none;
}
.row-content {
width: 100% !important;
}
.stack .column {
width: 100%;
display: block;
}
.mobile_hide {
min-height: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
font-size: 0px;
}
.desktop_hide,
.desktop_hide table {
display: table !important;
max-height: none !important;
}
.row-2 .column-1 .block-1.image_block td.pad {
padding: 0 10px !important;
}
.row-2 .column-1 .block-1.image_block .alignment div {
margin: 0 auto 0 0 !important;
}
.row-2 .column-2 .block-1.paragraph_block td.pad {
padding: 0 10px 10px !important;
}
.row-2 .column-1 {
padding: 5px 0 0 !important;
}
.row-2 .column-2 {
padding: 0 0 5px !important;
}
}
</style><style>sup, sub { font-size: 100% !important; } sup { mso-text-raise:10% } sub { mso-text-raise:-10% }</style>
</head>
<body class="body" style="background-color: #ffffff; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;"><div class="preheader" style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Hello [COMMENT_AUTHOR], thank you for your engagement with us! Your comment on our post "[POST_TITLE]" has been approved.</div>
<table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff;">
<tbody>
<tr>
<td>
<table class="row row-1" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td>
<table class="row-content stack" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 600px;" width="600">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top;">
<table class="heading_block block-1" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td class="pad">
<h1 style="margin: 0; color: #007a33; direction: ltr; font-family: 'Figtree','Arial'; font-size: 28px; font-weight: 700; letter-spacing: normal; line-height: 1.2; text-align: left; margin-top: 0; margin-bottom: 0; mso-line-height-alt: 34px;"><span class="tinyMce-placeholder" style="word-break: break-word;">Your Comment on "[POST_TITLE]" (MEDA Website)</span></h1>
</td>
</tr>
</table>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
<tr>
<td class="pad">
<div style="color:#222325;direction:ltr;font-family:'Figtree','Arial';font-size:14px;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;mso-line-height-alt:21px;">
<p style="margin: 0; margin-bottom: 16px;">Hello [COMMENT_AUTHOR],</p>
<p style="margin: 0; margin-bottom: 16px;">Thank you for your engagement with us! Your comment on our post "[POST_TITLE]" has been approved.</p>
<p style="margin: 0;">Comment: <br>[COMMENT_CONTENT]<br><br>You can see all comments on this post here: <br>[POST_URL]#comments</p>
</div>
</td>
</tr>
</table>
<table class="paragraph_block block-3" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
<tr>
<td class="pad">
<div style="color:#222325;direction:ltr;font-family:'Figtree','Arial';font-size:14px;font-weight:400;letter-spacing:0px;line-height:1.5;text-align:left;mso-line-height-alt:21px;">
<p style="margin: 0;">Thank you,<br>MEDA Website Administrator</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-2" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td>
<table class="row-content stack" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-radius: 0; color: #000000; width: 600px;" width="600">
<tbody>
<tr>
<td class="column column-1" width="25%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; border-right: 1px solid #e7e9eb; padding-bottom: 5px; padding-top: 5px; vertical-align: top;">
<table class="image_block block-1" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td class="pad">
<div class="alignment" align="left">
<div style="max-width: 119px;"><img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/j0y/3rx/v7u/MEDA%20Logo%20with%20Tagline_Bottom.png" style="display: block; height: auto; border: 0; width: 100%;" width="119" alt="MEDA: Creating Business Solutions to Poverty" title="Mennonite Economic Development Associates" height="auto"></div>
</div>
</td>
</tr>
</table>
<table class="divider_block desktop_hide block-2" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; display: none; max-height: 0; overflow: hidden;">
<tr>
<td class="pad">
<div class="alignment" align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; display: none; max-height: 0; overflow: hidden;">
<tr>
<td class="divider_inner" style="font-size: 1px; line-height: 1px; border-top: 1px solid #e7e9eb;"><span style="word-break: break-word;"> </span></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
<td class="column column-2" width="75%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top;">
<table class="paragraph_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
<tr>
<td class="pad" style="padding-left:10px;">
<div style="color:#101112;direction:ltr;font-family:'Figtree','Arial';font-size:14px;font-weight:400;letter-spacing:0px;line-height:1.2;text-align:left;mso-line-height-alt:17px;">
<p style="margin: 0;"><span style="word-break: break-word; color: #007a33;"><strong>Mennonite Economic Development Associates</strong></span><br>595 Parkside Drive, Suite 2, Waterloo, ON, Canada, N2L 0C7<br>PO Box 1771 Lancaster, PA, USA, 17608</p>
</div>
</td>
</tr>
</table>
<table class="html_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td class="pad">
<div style="font-family:'Figtree','Arial';text-align:center;" align="center"><div style="line-height: 0px;text-align:left;margin:10px 5px;">
<a href="https://linkedin.com/company/mennonite-economic-development-associates-meda-/" target="_blank" style="display: inline-block; width: 25px; height: 25px;margin: 0 5px;">
<img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/03w/jlf/dam/MEDA%20LinkedIn.png" width="25" height="25" /></a>
<a href="https://facebook.com/MEDAdotorg" target="_blank" style="display: inline-block; width: 25px; height: 25px; margin-right: 0 5px;">
<img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/awr/d0l/j9f/MEDA%20Facebook.png" width="25" height="25" /></a>
<a href="https://twitter.com/medadotorg" target="_blank" style="display: inline-block; width: 25px; height: 25px; margin: 0 5px;">
<img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/z8x/wq7/tsy/MEDA%20TwitterX.png" width="25" height="25" /></a>
<a href="https://instagram.com/medadotorg" target="_blank" style="display: inline-block; width: 25px; height: 25px;margin: 0 5px;">
<img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/yyr/vwi/0jp/MEDA%20Instagram.png" width="25" height="25" /></a>
</div></div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
It turns into this when I save, the head breaks and some CSS shows on the frontend
96
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0px;
overflow: hidden;
}
.image_block img+div {
display: none;
}
sup,
sub {
font-size: 75%;
line-height: 0;
}
@media (max-width:620px) {
.mobile_hide {
display: none;
}
.row-content {
width: 100% !important;
}
.stack .column {
width: 100%;
display: block;
}
.mobile_hide {
min-height: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
font-size: 0px;
}
.desktop_hide,
.desktop_hide table {
display: table !important;
max-height: none !important;
}
.row-2 .column-1 .block-1.image_block td.pad {
padding: 0 10px !important;
}
.row-2 .column-1 .block-1.image_block .alignment div {
margin: 0 auto 0 0 !important;
}
.row-2 .column-2 .block-1.paragraph_block td.pad {
padding: 0 10px 10px !important;
}
.row-2 .column-1 {
padding: 5px 0 0 !important;
}
.row-2 .column-2 {
padding: 0 0 5px !important;
}
}
sup, sub { font-size: 100% !important; } sup { mso-text-raise:10% } sub { mso-text-raise:-10% }
<div class="preheader" style="display: none; font-size: 1px; color: #333333; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">Hello [COMMENT_AUTHOR], thank you for your engagement with us! Your comment on our post "[POST_TITLE]" has been approved.</div>
<table class="nl-container" style="background-color: #ffffff;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table class="row row-1" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<table class="row-content stack" style="color: #000000; width: 600px;" role="presentation" border="0" width="600" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="column column-1" style="font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top;" width="100%">
<table class="heading_block block-1" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td class="pad">
<h1 style="margin: 0; color: #007a33; direction: ltr; font-family: 'Figtree','Arial'; font-size: 28px; font-weight: bold; letter-spacing: normal; line-height: 1.2; text-align: left; margin-top: 0; margin-bottom: 0;"><span class="tinyMce-placeholder">Your Comment on "[POST_TITLE]" (MEDA Website)</span></h1>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-2" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td class="pad">
<div style="color: #222325; direction: ltr; font-family: 'Figtree','Arial'; font-size: 14px; font-weight: 400; letter-spacing: 0px; line-height: 1.5; text-align: left;">
<p style="margin: 0; margin-bottom: 16px;">Hello [COMMENT_AUTHOR],</p>
<p style="margin: 0; margin-bottom: 16px;">Thank you for your engagement with us! Your comment on our post "[POST_TITLE]" has been approved.</p>
<p style="margin: 0;">Comment:
[COMMENT_CONTENT]
You can see all comments on this post here:
[POST_URL]#comments</p>
</div></td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-3" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td class="pad">
<div style="color: #222325; direction: ltr; font-family: 'Figtree','Arial'; font-size: 14px; font-weight: 400; letter-spacing: 0px; line-height: 1.5; text-align: left;">
<p style="margin: 0;">Thank you,
MEDA Website Administrator</p>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-2" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<table class="row-content stack" style="border-radius: 0; color: #000000; width: 600px;" role="presentation" border="0" width="600" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="column column-1" style="font-weight: 400; text-align: left; border-right: 1px solid #e7e9eb; padding-bottom: 5px; padding-top: 5px; vertical-align: top;" width="25%">
<table class="image_block block-1" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="left">
<div style="max-width: 119px;"><img style="display: block; height: auto; border: 0; width: 100%;" title="Mennonite Economic Development Associates" src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/j0y/3rx/v7u/MEDA%20Logo%20with%20Tagline_Bottom.png" alt="MEDA: Creating Business Solutions to Poverty" width="119" height="auto" /></div>
</div></td>
</tr>
</tbody>
</table>
<table class="divider_block desktop_hide block-2" style="display: none; max-height: 0; overflow: hidden;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<table style="display: none; max-height: 0; overflow: hidden;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="divider_inner" style="font-size: 1px; line-height: 1px; border-top: 1px solid #e7e9eb;"></td>
</tr>
</tbody>
</table>
</div></td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" style="font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top;" width="75%">
<table class="paragraph_block block-1" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="pad" style="padding-left: 10px;">
<div style="color: #101112; direction: ltr; font-family: 'Figtree','Arial'; font-size: 14px; font-weight: 400; letter-spacing: 0px; line-height: 1.2; text-align: left;">
<p style="margin: 0;"><span style="color: #007a33;"><strong>Mennonite Economic Development Associates</strong></span>
595 Parkside Drive, Suite 2, Waterloo, ON, Canada, N2L 0C7
PO Box 1771 Lancaster, PA, USA, 17608</p>
</div></td>
</tr>
</tbody>
</table>
<table class="html_block block-2" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="pad">
<div style="font-family: 'Figtree','Arial'; text-align: center;" align="center">
<div style="line-height: 0px; text-align: left; margin: 10px 5px;">
<a style="display: inline-block; width: 25px; height: 25px; margin: 0 5px;" href="https://linkedin.com/company/mennonite-economic-development-associates-meda-/" target="_blank" rel="noopener">
<img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/03w/jlf/dam/MEDA%20LinkedIn.png" width="25" height="25" /></a>
<a style="display: inline-block; width: 25px; height: 25px; margin-right: 0 5px;" href="https://facebook.com/MEDAdotorg" target="_blank" rel="noopener">
<img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/awr/d0l/j9f/MEDA%20Facebook.png" width="25" height="25" /></a>
<a style="display: inline-block; width: 25px; height: 25px; margin: 0 5px;" href="https://twitter.com/medadotorg" target="_blank" rel="noopener">
<img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/z8x/wq7/tsy/MEDA%20TwitterX.png" width="25" height="25" /></a>
<a style="display: inline-block; width: 25px; height: 25px; margin: 0 5px;" href="https://instagram.com/medadotorg" target="_blank" rel="noopener">
<img src="https://d15k2d11r6t6rl.cloudfront.net/pub/bfra/v2cxfejl/yyr/vwi/0jp/MEDA%20Instagram.png" width="25" height="25" /></a>
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
