The company I work for has been using the below email template for a while but the template seems to be displaying incorrectly in iPhone 11 and the 12 Pro Max, but displays correctly for everything else. The background colour doesn't fill the screen.
I'm not a HTML whizz and can't seem to find the problem - any Stack Overflow bosses able to help? Pre-content section of email pasted below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title>Support Revolution</title>
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,400" rel="stylesheet">
<!--<![endif]-->
<style>
@media screen {
@font-face {
font-family:'Open Sans';
font-style:normal;
font-weight:400;
src:local('Open Sans'), local('opensans'), url(http://fonts.gstatic.com/s/opensans/v13/cjzkeoubrn4kerxqtauh3vtxra8tvwticgirnjhmvjw.woff2) format('woff2');
unicode-range:u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000;
}
}
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode:bicubic;
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
}
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
img.g-img + div {
display: none !important;
}
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
.email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
@media only screen and (min-device-width: 414px) {
.email-container {
min-width: 414px !important;
}
}
</style>
<!-- CSS Reset : END -->
<!-- Reset list spacing because Outlook ignores much of our inline CSS. -->
<!--[if mso]>
<style type="text/css">
ul,
ol {
margin: 0 !important;
}
li {
margin-left: 30px !important;
}
li.list-item-first {
margin-top: 0 !important;
}
li.list-item-last {
margin-bottom: 10px !important;
}
</style>
<![endif]-->
<style>
.button-td,
.button-a,
.footer-icon:hover,
a:hover {
transition: all 100ms ease-in;
}
.button-td-primary:hover,
.button-a-primary:hover,
.button-td-secondary:hover,
.button-a-secondary:hover,
.footer-icon:hover,
a:hover {
opacity: 0.9 !important;
}
@media screen and (max-width: 480px) {
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
.stack-column-center {
text-align: center !important;
}
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
.email-container p {
font-size: 17px !important;
}
}
</style>
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #272727;">
<center style="width: 100%; background-color: #272727;"><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #272727;">
<tr>
<td>
<![endif]--><!-- Hidden Preheader Text -->
<div pardot-region="preheader_content" style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">UPDATE ME.</div>
<!-- Hidden Preheader Text - END -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#FB8D00" height="7" style="font-size:1px; line-height: 1px;"> </td>
</tr>
</tbody>
</table>
<div class="email-container" style="max-width: 680px; margin: 0 auto;"><!--[if mso]>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="680">
<tr>
<td>
<![endif]--><!-- Email Body : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;" width="100%"><!-- Logo -->
<tbody>
<tr>
<td align="center" style="padding: 20px 30px 0px 30px; text-align: center"><a href="https://www.supportrevolution.com?utm_source=newsletter&utm_medium=email" style="color:#FB8D00; text-decoration: none;" target="_blank"><img alt="Support Revolution" border="0" src="https://www2.supportrevolution.com/l/500361/2019-06-19/49n2ms/500361/89653/transparent_background_logo_white.png" style="height: auto;font-family: sans-serif; font-size: 24px; line-height: 15px; color: #FB8D00;" width="180"></a></td>
</tr>
<!-- Logo : END --><!-- Hero Section : BEGIN --><!-- Hero Section - END --><!-- Image section - BEGIN -->
<tr pardot-repeatable="image-section">
<td align="center" pardot-region="hero-img" style="padding:30px 0 0 0;">
<h1 style="margin: 0 0 30px; font-family:'Montserrat', sans-serif; font-size: 28px; line-height: 35px; color: #FB8D00; font-weight: bold;">Body Text, no image</h1>
<a href="https://www.supportrevolution.com?utm_source=newsletter&utm_medium=email"><img alt="" src="https://www2.supportrevolution.com/l/500361/2019-04-10/46nfjr/500361/82784/Large_Email_Template_Image.jpg" style="display: block; width: 100%; height: auto;"></a></td>
</tr>
<!-- Image section - END --><!-- Body Text - BEGIN -->
<tr pardot-repeatable="body-text">
Example of how it displays here: incorrect rendering
