We have an HTML/CSS email template we've built that is fully responsive in the browser, and in almost all desktop email clients and mobile email clients except for Polymail and Thunderbird. We cannot figure out what is causing them to not be responsive in these two email clients but it is responsive in all the others. Any one have any tips?
Here is the code we are using to generate the template. Please note this template is used on both web and for email, so it contains some stuff that is not particularly for email. We've checked all image sizing and that does not appear to be the problem.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Digest</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<style type="text/css">:root {
color-scheme: light dark;
supported-color-schemes: light dark
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important
}
img {
border: 0 !important;
outline: 0 !important
}
p {
Margin: 0 !important;
Padding: 0 !important
}
.ExternalClass * {
line-height: 100%
}
.em_defaultlink a {
color: inherit;
text-decoration: none
}
.em_defaultlink1 a {
color: inherit;
text-decoration: underline
}
.em_g_img+div {
display: none
}
.em_full_img img {
border-radius: 8px
}
.em_full_img1 img {
border-radius: 6px
}
.rss_content * {
font-size: 15px;
font-weight: unset;
margin: unset
}
.rss_content img {
max-width: 100%;
height: auto !important
}
.rss_content p {
margin-bottom: 10px !important
}
.rss_content p:last-child {
margin-bottom: 0 !important
}
.rss_content p a {
color: #fcad03 !important
}
.reddit_content * {
font-size: 15px;
font-weight: unset;
margin: unset
}
.reddit_content img {
max-width: 100%;
height: auto !important
}
.reddit_content p {
margin-bottom: 10px !important
}
.reddit_content p:last-child {
margin-bottom: 0 !important
}
.reddit_content p a {
color: #fcad03 !important
}
.source_message_text_wrapper {
display: flex;
justify-content: left
}
.source_message_text {
margin-top: 18px !important;
display: inline-block;
font-weight: 600;
background-color: #e5e2e2;
opacity: .5;
padding: 4px 15px;
border-radius: 20px;
text-align: center
}
#MessageViewBody a,
a[x-apple-data-detectors],
u+.em_body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit
}
@media only screen and (max-width:667px) {
.em_main_table {
width: 100% !important
}
.em_wrapper {
width: 100% !important
}
.em_hide {
display: none !important
}
.em_full_img img {
width: 100% !important;
height: auto !important
}
.em_full_img1 img {
width: 100% !important;
height: auto !important;
max-width: none !important
}
.em_center {
text-align: center !important
}
.em_side10 {
width: 10px !important
}
.em_aside10 {
padding: 0 10px !important
}
.em_side15 {
width: 15px !important
}
.em_aside15 {
padding: 0 15px !important
}
.em_ptop {
padding-top: 20px !important
}
.em_pbottom {
padding-bottom: 20px !important
}
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important
}
.em_h30 {
height: 30px !important
}
.em_mob_block {
display: block !important
}
.em_hauto {
height: auto !important
}
.em_clear {
clear: both !important;
width: 100% !important;
display: block !important
}
u+.em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important
}
.em_pr0 {
padding-right: 0 !important
}
.em_pad1 {
padding: 20px 15px !important
}
.em_pad2 {
padding: 0 15px !important
}
.em_pad3 {
padding: 20px 15px !important
}
.em_pad4 {
padding: 15px 15px 0 !important
}
.em_pt1 {
padding-top: 8px !important
}
.em_pt2 {
padding-top: 24px !important
}
.em_pt5 {
padding-top: 5px !important
}
.em_h40 {
height: 35px !important
}
.em_h0 {
height: 0 !important
}
.em_h10 {
height: 8px !important
}
.em_h5 {
height: 5px !important
}
.em_w5 {
width: 5px !important
}
}
@media screen and (max-width:374px) {
.em_hide1 {
display: none !important
}
}
@media (prefers-color-scheme:dark) {
.em_body {
background-color: #111 !important
}
.em_module {
background-color: #111 !important
}
.em_txt_white {
color: #fff !important
}
.em_txt_white a {
color: #fff !important
}
.em_txt_dark {
color: #000 !important
}
.em_txt_dark a {
color: #000 !important
}
.em_dark {
background-color: #000 !important
}
.em_light {
background-color: #fefefe !important;
border-radius: 8px !important
}
.em_light01 {
background-color: #2a2a2a !important
}
.em_invert_img img {
filter: invert(1) !important
}
}
</style>
</head>
<table>tags and the<center>tag etc etc .. Some email clients (I'm looking at you Outlook) aren't great at rendering HTML written using current standards.