I created a template to test building AMP emails and, even though the email gets a PASS on both AMP playground & Gmail AMP for Email playground, when the test email is sent from amp@gmail.dev, the css does not render. Full code below:
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
/* {border: 1px solid red;} */
body {background-color: #20252c;
}
.promo {
margin: 1em;
height: 40px;
align-items: center;
font-family: Helvetica;
font-weight: bold;
font-size: 1.5em;
color: white;
}
.container {
display: grid;
grid-template-columns: 3fr 4fr 2fr 2fr ;
gap: 10px;
grid-template-rows: repeat(4, 1fr);
background-color: #2b3037;
margin: 1em;
border-radius: 2%;
}
#item1 {
grid-column: 1 / 3;
grid-row: 1;
background-color:;
color: white;
font-family: Helvetica;
margin-left: 15px;
}
.oddswas1 {
grid-column: 3;
grid-row: 1;
background-color: #20252c;
border-radius: 5%;
margin: 10px;
text-align: center;
color: #878e97;
text-decoration: line-through;
font-family: Helvetica;
font-size: 1.4em;
}
.oddsnow1 {
grid-column: 4;
grid-row: 1;
background-color: #20252c;
border-radius: 5%;
margin: 10px;
text-align: center;
color: #878e97;
font-family: Helvetica;
font-size: 1.4em;
background-color: #154644;
color: #46ebe3;
font-family: Helvetica;
font-size: 1.4em;
border: none;
}
#item2 {
grid-column: 1 / 3;
grid-row: 2;
background-color:;
color: white;
font-family: Helvetica;
margin-left: 15px;
}
.oddswas2 {
grid-column: 3;
grid-row: 2;
background-color: #20252c;
border-radius: 5%;
margin: 10px;
text-align: center;
color: #878e97;
text-decoration: line-through;
font-family: Helvetica;
font-size: 1.4em;
}
.oddsnow2 {
grid-column: 4;
grid-row: 2;
background-color: #20252c;
border-radius: 5%;
margin: 10px;
text-align: center;
color: #878e97;
font-family: Helvetica;
font-size: 1.4em;
background-color: #154644;
color: #46ebe3;
font-family: Helvetica;
font-size: 1.4em;
border: none;
}
</style>
</head>
<body>
<amp-img layout="responsive" src="https://cdn.braze.eu/appboy/communication/assets/image_assets/images/638a1d3bd5e92a0054b37948/original.png?1669995834" alt="Welcome" height="350" width="800"></amp-img>
<div class="promo">
<div>
<amp-img src="https://www.midnite.com/_nuxt/img/boost-alt.af311e5.svg" height= "30px" width="30px"></amp-img>
<span> Boosts </span>
</div>
</div>
<div class="container">
<div id="item1">
<h2> Norwich City / Norwich City </h2>
<h3> Half-time/Full-time - Norwich City v Birmingham City | 19:45 </h3>
</div>
<div class="oddswas1">
<h3> 8/5 </h3>
</div>
<button class="oddsnow1">
<h3> 17/10 </h3>
</button>
<div id="item2">
<h2> Swansea, Blackburn & Norwich All to Win </h2>
<h3> Favourites Acca - Feb 21 Championship Enhanced Accas | 19:45 </h3>
</div>
<div class="oddswas2">
<h3> 301/50 </h3>
</div>
<button class="oddsnow2">
<h3> 27/4 </h3>
</button>
</div>
</body>
</html>
I made sure that the preview dynamic emails is enabled and that amp@gmail.dev is whitelisted. enter image description here. I was expecting the email to arrive with the style as per the playgrounds, however, the css does not render. Thanks for your help in advance.
There are some invalid CSS properties that are tolerated by the CSS parser used by the AMP validator but not accepted by the Gmail CSS sanitizer. To fix this, remove all occurrences of background-color:;, where the property values are missing.
