I've been banging my head against this problem for the last 6 hours. All the googling I've done so far is telling me that divs should work in emails after 2017. Every online html email tester I'm using shows my email as producing a perfectly well laid out email.
Then I send it in Gmail and it comes out a complete mess.
Here is the HTML rendered in browser:
https://i.imgur.com/NYjUdqX.png
Here is the HTML when sent through Gmail:
https://i.imgur.com/mPQ9Lbe.png
Here is the HTML code itself:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html charset=UTF-8 width=device-width, initial-scale=1"
name="viewport"
/>
<style>
@media (max-width: 600px) {
.email-container {
width: 390px !important;
}
.big-divider {
width: 324px !important;
}
h1 {
font-size: 23px !important;
}
.h1-2 {
margin-bottom: 23px !important;
}
.wine-pic {
width: 324px !important;
height: 262px !important;
}
h2 {
font-size: 18px !important;
width: 330px !important;
}
.test-promo-box {
width: 226px !important;
height: 42px !important;
margin-bottom: 30px !important;
}
.desktop-icons {
display: none !important;
}
.mobile-icons {
display: block !important;
}
.female-founded {
font-size: 12px !important;
}
.last-paragraph {
width: 324px !important;
}
}
</style>
</head>
<body
style="
display: flex;
flex-direction: column;
align-items: center;
background-color: wheat;
font-family: Verdana, Geneva, Tahoma, sans-serif;
"
>
<div
style="background-color: rgb(255, 252, 247); width: 600px"
>
<div style="display: flex; flex-direction: column; align-items: center">
<img
style="
margin-top: 28px;
margin-bottom: 21px;
width: 20px;
height: 20px;
"
src="https://keen-pike-986d32.netlify.app/images/BOXT_Final_Logo_Black_RGB.png"
/>
<hr style="width: 500px; margin-top: 0" />
<h1 style="text-align: center; font-size: 28px; margin-bottom: 2px">
YOU'VE EARNED
</h1>
<h1
style="
text-align: center;
margin-top: 0;
margin-bottom: 16px;
font-size: 28px;
"
>
BOXT BUCKS!
</h1>
<img
src="https://keen-pike-986d32.netlify.app/images/wine_box.jpg"
style="width: 503px; height: 406px"
/>
<h2
style="
text-align: center;
margin-bottom: 20px;
font-size: 20px;
width: 500px;
"
>
Thanks for referring your friend to BOXT! As a start-up, every single
person who helps us spread the word about what we're up to makes a
huge impact.
</h2>
<h2
style="
text-align: center;
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
width: 500px;
"
>
As a thank you, we're sending you $64 in BOXT Bucks! That'll get you
your next BOXT on us — aka four bottles of fine wine delivered
directly to your door from our Napa winery.
</h2>
<h2
style="
text-align: center;
margin-top: 0;
margin-bottom: 21px;
font-size: 20px;
width: 500px;
"
>
Enter the code below at checkout when purchasing your next BOXT.
</h2>
<div
style="
height: 42px;
width: 226px;
background-color: rgb(146, 191, 197);
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 37px;
"
>
<h3 style="text-align: center; font-size: 15px">TEST PROMO CODE</h3>
</div>
<hr style="width: 500px; margin-top: 0" />
<h2 style="font-size: 20px; margin-bottom: 11px; text-align: center">
WHY BOXT?
</h2>
<hr style="width: 18px; margin-top: 0; margin-bottom: 25px" />
<div
style="display: flex; flex-direction: column; align-items: center"
>
<div
style="
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(5, 1fr);
justify-items: center;
align-items: center;
width: 500px;
margin-bottom: 29px;
"
>
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</div>
<div
style="
margin-top: 10px;
margin-bottom: 35px;
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(4, 1fr);
justify-items: center;
width: 380px;
"
>
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</div>
</div>
<div style="display: none">
<div
style="
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 8px;
justify-items: center;
align-items: center;
"
>
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</div>
</div>
<hr style="width: 63px; margin-top: 0; margin-bottom: 30px" />
<p
style="
margin-bottom: 5px;
margin-top: 0;
font-size: 13px;
text-align: center;
"
>
Questions? Contact [email protected]
</p>
<p
style="
margin-top: 0;
margin-bottom: 30px;
font-size: 13px;
text-align: center;
"
>
@drinkboxt | drinkboxt.com
</p>
<hr style="width: 63px; margin-top: 0; margin-bottom: 37px" />
<h3
style="
font-size: 13.5px;
margin-top: 0;
margin-bottom: 16px;
text-align: center;
"
>
FEMALE FOUNDED. BORN IN AUSTIN. MADE IN NAPA.
</h3>
<hr
style="width: 500px; margin-top: 0; margin-bottom: 15px"
/>
<p style="text-align: center; font-size: 9.5px; margin-top: 0">
*Excludes profiles Three and Six
</p>
<p style="text-align: center; font-size: 11px">
DRINK BOXT LLC, 7601 S Congress Ave #150, Austin, TX 78745
</p>
<p
style="
width: 500px;
text-align: center;
font-size: 11px;
margin-bottom: 97px;
"
>
*Offer valid in the form of BOXT gift cards. Redeem up to 12 months of
BOXT on us. Offer cannot be combined with any other promotion or new
member offers and discounts, subject to DRINK BOXT, LLC Terms &
Conditions. Void where prohibited. Subject to DRINK BOXT, LLC Terms &
Conditions. Members never pay shipping and can pause, change profile
or cancel at any time. Subscription is ongoing until canceled. Email
communication is intended for those 21 . Must be 21 to order and
receive wine shipment. Void where prohibited. DRINK BOXT, LLC cannot
ship to AK, AR, DE, HI, IN, MS, RI, UT, WV.
</p>
</div>
</div>
</body>
</html>
I've tried deleting various parts of the code, including the entire block, the media queries, nothing seems to change the outcome.
If anyone could please help me figure this out, I will be eternally grateful.
CodePudding user response：
I mean <div>s may work in emails but media queries don't, at least not in all email cients, and display: flex and display: grid DEFINITELY won't work -- emails are like using HTML 4 so a lot of the modern conveniences don't exist. Take a look at the templates on Cerberus. These are the most solid email design patterns I know of. I have been using them myself for 5 years now, in my eyes [opinion] -- this is the email standard. I mean Litmus even use it for their paid email builder
CodePudding user response：
So it looks like a lot of CSS is not supported in email still, for example flex and grid. Luckily, media queries are supported on gmail at least.
The solution in the end for me was to rewrite everything using tables. It now functions flawlessly.
Here is my functioning tables code for reference:
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html charset=UTF-8 width=device-width, initial-scale=1"
name="viewport"
/>
<style>
@media (max-width: 600px) {
.desktop-icons {
display: none !important;
}
.mobile-icons {
display: block !important;
}
.female-founded {
font-size: 12px !important;
}
.unique-code {
font-size: 16px !important;
}
.last-paragraph {
font-size: 9.5px !important;
}
}
</style>
</head>
<body>
<div id="email" style="width:600px;margin: auto;background:#FFFCF7; font-family: Verdana, Geneva, Tahoma, sans-serif;">
<table role="presentation" border="0" align="center" cellspacing="0">
<tr>
<td>
<img style="
margin-top: 28px;
margin-bottom: 21px;
width: 20px;
height: 20px;
" src="https://keen-pike-986d32.netlify.app/images/BOXT_Final_Logo_Black_RGB.png">
</td>
</tr>
</table>
<hr style="width: 85%; margin-top: 0" />
<h1 style="text-align: center; font-size: 28px; margin-bottom: 2px">
HERE'S $10 OFF
</h1>
<h1 style="
text-align: center;
margin-top: 0;
margin-bottom: 16px;
font-size: 28px;
">
YOUR FIRST BOXT!
</h1>
<!-- Header -->
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center">
<img src="https://keen-pike-986d32.netlify.app/images/wine_box.jpg" style="width: 503px; height: 406px" />
</tr>
</td>
</table>
<!-- Body 1 -->
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="padding: 15px 30px 10px 15px;">
<h2 style="
text-align: center;
margin-top: 0;
margin-bottom: 5px;
font-size: 20px;
font-weight: 500;
">
Enter the unique code below at
</h2>
<h2 style="
text-align: center;
margin-top: 0;
margin-bottom: 0;
font-size: 20px;
font-weight: 500;
">
checkout for $10 off your first BOXT.
</h2>
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0">
<tr>
<td align="center">
<div
style="
height: 42px;
width: 226px;
background-color: rgb(146, 191, 197);
margin-bottom: 37px;
"
>
<h3 style="text-align: center; font-size: 15px; padding-top: 11px;">TEST PROMO CODE</h3>
</div>
</tr>
</td>
</table>
<hr style="width: 85%; margin-top: 0" />
<!-- Body 2-->
<div >
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</td>
</tr>
</table>
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 90px;">
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 30px;">
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 30px;">
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 90px 30px 30px;">
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</td>
</tr>
</table>
</div>
<div style="display: none;">
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
</td>
</tr>
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
</td>
</tr>
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</td>
</tr>
</table>
</div>
<hr style="width: 63px; margin-top: 0; margin-bottom: 30px" />
<p
style="
margin-bottom: 5px;
margin-top: 0;
font-size: 13px;
text-align: center;
"
>
Questions? Contact [email protected]
</p>
<p
style="
margin-top: 0;
margin-bottom: 30px;
font-size: 13px;
text-align: center;
"
>
@drinkboxt | drinkboxt.com
</p>
<hr style="width: 63px; margin-top: 0; margin-bottom: 37px" />
<h3
style="
font-size: 13.5px;
margin-top: 0;
margin-bottom: 16px;
text-align: center;
"
>
FEMALE FOUNDED. BORN IN AUSTIN. MADE IN NAPA.
</h3>
<hr
style="width: 85%; margin-top: 0; margin-bottom: 15px"
/>
<table role="presentation" border="0" align="center" cellspacing="0">
<tr>
<td>
<p style="text-align: center; font-size: 9.5px; margin-top: 0">
*Excludes profiles Three and Six
</p>
<p style="text-align: center; font-size: 11px">
DRINK BOXT LLC, 7601 S Congress Ave #150, Austin, TX 78745
</p>
<p
style="
text-align: center;
font-size: 11px;
padding-bottom: 97px;
margin: 0 5px 0 5px;
">
*Offer valid in the form of BOXT gift cards. Redeem up to 12 months of
BOXT on us. Offer cannot be combined with any other promotion or new
member offers and discounts, subject to DRINK BOXT, LLC Terms &
Conditions. Void where prohibited. Subject to DRINK BOXT, LLC Terms &
Conditions. Members never pay shipping and can pause, change profile
or cancel at any time. Subscription is ongoing until canceled. Email
communication is intended for those 21 . Must be 21 to order and
receive wine shipment. Void where prohibited. DRINK BOXT, LLC cannot
ship to AK, AR, DE, HI, IN, MS, RI, UT, WV.
</p>
</td>
</tr>
</table>
</div>
</body>
</html>