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
class="email-container"
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 class="big-divider" style="width: 500px; margin-top: 0" />
<h1 style="text-align: center; font-size: 28px; margin-bottom: 2px">
YOU'VE EARNED
</h1>
<h1
class="h1-2"
style="
text-align: center;
margin-top: 0;
margin-bottom: 16px;
font-size: 28px;
"
>
BOXT BUCKS!
</h1>
<img
class="wine-pic"
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
class="test-promo-box"
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 class="big-divider" 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
class="desktop-icons"
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 class="mobile-icons" 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 hello#drinkboxt.com
</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
class="female-founded"
style="
font-size: 13.5px;
margin-top: 0;
margin-bottom: 16px;
text-align: center;
"
>
FEMALE FOUNDED. BORN IN AUSTIN. MADE IN NAPA.
</h3>
<hr
class="big-divider"
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
class="last-paragraph"
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.
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
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 class="big-divider" style="width: 85%; margin-top: 0" />
<h1 style="text-align: center; font-size: 28px; margin-bottom: 2px">
HERE'S $10 OFF
</h1>
<h1 class="h1-2" 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 class="wine-pic" 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 class="unique-code" style="
text-align: center;
margin-top: 0;
margin-bottom: 5px;
font-size: 20px;
font-weight: 500;
">
Enter the unique code below at
</h2>
<h2 class="unique-code" 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
class="test-promo-box"
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 class="big-divider" style="width: 85%; margin-top: 0" />
<!-- Body 2-->
<div class="desktop-icons">
<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 class="mobile-icons" 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 hello#drinkboxt.com
</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
class="female-founded"
style="
font-size: 13.5px;
margin-top: 0;
margin-bottom: 16px;
text-align: center;
"
>
FEMALE FOUNDED. BORN IN AUSTIN. MADE IN NAPA.
</h3>
<hr
class="big-divider"
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
class="last-paragraph"
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>
Related
I know many people ask for the same issue but I cannot figure out how to solve this.
I have this table and I want to reduce the space between rows so the yellow info is closer to the title
I tried with negative margin but it does not work.
Here is the code I use for the first yellow message
<div class="visible-mobile">
<div class="header-panel-mobile" cellpadding = "0" cellspacing = "0" style=" height: 50vw; width: 85vw; margin-right: auto; margin-left: auto;background-color: #eaeaea;border-radius: 10px;">
<table class="header-table-mobile" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td class="font-roboto font-12 " style="padding-top: 3vw; text-align: center; width: 1vw; color:#4d4c4c; font-weight: 900">
<legend class="legend font-roboto font-12" style="width: 100%">{% trans %}alert_level_caps{% endtrans %}</legend>
</td>
</tr>
<!-- SEPARADOR HORIZONTAL -->
<tr>
<td class="">
<hr style="height: 0.015vh; width:7%; border-width: 0; color: #f7a800; background-color: #f7a800; margin-right: auto; margin-left: auto">
</td>
</tr>
<!-- BARRA NIVEL DE ALERTA -->
<tr>
<td class="" style="width: 100%; height: 6%; text-align: center; vertical-align: top">
<!-- FIELDSET NIVEL DE ALERTA -->
<fieldset id="barra-dispositivo-movil" class="fieldsetGris centeredFieldset font-roboto font-12" style="height: 2vw; width: 40vw; display: flex; justify-content: center; align-items: center; margin-right: auto; margin-left: auto; border-radius: 10px;">
<!-- TEXTO ALERTA -->
<div id="" class="" style="">
<p id="textAlarm" class="" style="color:#FFFFFF">--</p>
</div>
</fieldset>
</td>
</tr>
About the header table mobile class it's just this.
.header-table-mobile {
width: 100%;
margin: 0 0;
margin-top: 0;
}
Can you tell me how do I decrease the size please? I would like to overlap them if is not possible to decrease the space.
That is because of the margin of hr
Try this in the CSS:
.header-table-mobile tr hr {
margin: 0;
}
I'm having a trouble to position an image on top og 2 different backgrounds on html email.
web view is fine but for emails it's not. I need this code to preforme on all email clients.
here is the layout of what it supposed to look like, and how it is actually look like.
layout
it seems that the image can't get the neative margin to go on top of the other background.
here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title></title>
<style type="text/css">
body{
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #F3F3F3;
}
table{
border-spacing: 0;
}
td{
padding: 0;
}
img{
border: 0;
}
#media screen and (min-width: 600px) {
}
#media screen and (max-width: 600px) {
}
</style>
<!--[if mso]>
<style>
body{
font-family: Helvetica, Arial, sans-serif!important;
text-align: center!important;
display: inline-block!important;
}
table{
border-collapse: collapse!important;
}
</style>
<![endif]-->
</head>
<body>
<div style="width: 100%; table-layout: fixed; background-color: #F3F3F3; padding-bottom: 20px; text-align: center;">
<table style="background-color: white; color: #2E4A63; margin: 0 auto; width: 100%; max-width: 600px; border-spacing: 0; padding-bottom: 20px;" width="100%" align="center">
<tr>
<td>
<table style="direction: ltr;" width="100%">
<tr>
<!-- Body Text -->
<td align="center" style="text-align: center;">
<h1 style="font-size: 30px; margin: 45px auto 20px auto; line-height: 32px;">
Highlight text
</h1>
<h3 style="font-size: 18px; font-weight: unset; line-height: 24px; text-align: center; margin: 0 auto 37px auto;">
Paragraph text
</h3>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding-top: 10px; padding-bottom: 50px;">
<a href="#" tabindex="-1" target="_blank" style="padding: 15px 55px; background-color: #ff3f4e; color: white; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50px;">
<span style="color: white;">Button</span>
</a>
</td>
</tr>
<!-- HERO 2 SECTION -->
<tr>
<td>
<table style="background-image: url('urlbackground.png'); background-size: cover; background-repeat: no-repeat; width: 600px; max-width: 100%;">
<tr>
<!-- TOP SECTION -->
<td>
<!-- Highlight text -->
<h1 style="font-size: 30px; font-weight: unset; margin: 45px auto 15px auto; line-height: 32px; color: black;">
some content
</h1>
<!-- Paragraph text -->
<h3 style="font-size: 18px; font-weight: unset; line-height: 24px; text-align: center; margin: 0;color: black;">
more content
</h3>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding-top: 50px; padding-bottom: 90px;">
<a href="#" tabindex="-1" target="_blank" style="padding: 15px 60px; background-color: #16BBDF; color: white; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50px;">
<span style="color: white;">Button 2</span>
</a>
</td>
</tr>
</table>
<table style="background-image: url('urlbackground2.png'); background-size: cover; background-repeat: no-repeat; width: 600px; height: 250px; max-width: 100%;">
<tr>
<td>
<div style="margin-top: 50px; margin-left: 40px; color: black; text-align: left; padding: 0; width: 40%;">
<h1 style="font-size: 25px; line-height: 1.2;">
Highlight
</h1>
<h3 style="font-size: 16px; font-weight: unset;">
some text
</h3>
</div>
</td>
<td>
<img src="image.png" alt="image" width="283" style="float: right; padding: 0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
we are tryin to make modify an email for making it work in outlook and media# don't seem to work. im out of idea,
this doesn't seem to work to
here the base model i took for outlook specification with css but it don't seems to work
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
soo i tried simple test with changing the background color first with a nice looking red
but it doesn't seem to actually do something. i don't realy know what i can do
<!--[if mso]>
<style>
.table {
background-color : red !important;
}
.body {
background-color : red !important;
}
</style>
<![endif]-->
</head>
<body
class="clean-body"
style="
margin: 0 auto;
padding: 0 auto ;
-webkit-text-size-adjust: 100%;
color-scheme: light only;">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
background="https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png" width="600" height="auto"
style="
max-width: 600px;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
vertical-align: top;
min-width: 320px;
margin: 0 auto;
background-image: url('https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png'); width:600px; display: block;
background-color : rgb(33, 34, 34);
color-scheme: light only;
width: 100%;
color: #ffffff;
font-family: 'Roboto', sans-serif;
top : -50px;
"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td style="min-width: 180px; width: 210px; padding-bottom: 37px;">
<table style="margin: 0; padding: 0">
<tbody>
<tr>
<td
style="
padding-left: 42px;
padding-bottom: 1px;
min-width: 83px;
padding-top: 40px;
padding-right: 0px;
"
>
<table>
<tbody>
<tr>
<td style="min-width: 180px">
<div
style="
font-size: 15px;
font-weight: 800;
line-height: 1;
color:rgb(126, 122, 122);filter: brightness(100);
"
>
Inès AZUELOS
</div>
</td>
</tr>
<tr>
<td>
<div
style="
font-size: 13px;
font-weight: 600;
padding-top: 5px;
padding-left: 1px;
color: #3399ff;"
>
Direction - Assistante
</div>
</td>
</tr>
<tr>
<td style="
padding-top: 16px;
padding-left: 2px;
color:rgb(126, 122, 122);filter: brightness(100);
font-size: 13px;
font-weight: 600;"
>
EICIAM
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="
padding-left: 41px;
padding-bottom: 2px;
padding-right: 0px;
padding-top: 15px;
min-width: 83px;
"
>
<table>
<tbody>
<tr>
<td alt="logo facebook" title="logofacebook" style="padding: 3px; width : 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block;border :0;"/>
</td>
<td alt="logo linkedin" title="logolinkedin" style="padding: 3px; width: 20px; height: 20px;">
<img style="width: 20px; height: 20px; display: block; border :0;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<!-- --------------------- -->
<td style="padding: 33px 0 0 0; width: 226px; margin-left: 5px ">
<table>
<tbody>
<tr>
<td style="border-left: 1px solid #ffffff67; padding: 7px 0 0 19px;">
<table
style="
font-size: 11px;
color: #212222;
letter-spacing: 0.7px;
"
>
<tbody>
<tr>
<td style="min-width: 170px">
<table>
<tbody>
<tr>
<td alt="phone" title="phone" style="min-width: 19px; padding-top: 2px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td href=""style="color:rgb(126, 122, 122);filter: brightness(100%); padding-top: 5px; padding-left: 10px; font-size: 12px;"> </td>
</tr>
<tr>
<td alt="mail" title="mail" style="padding-top: 13px; width: 20px; height : 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px; font-size: 12px;">
<a href="" style="color:rgb(126, 122, 122);filter: brightness(100);" > </a>
</td>
</tr>
<tr>
<td alt="web" title="web" style="padding-top: 12px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border: 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px;font-size: 12px;">
eiciam.fr
</td>
</tr>
<tr>
<td alt="print" title="print" style="padding-top: 15px;width: 20px; height: 20px; display:inline; border:0;">
<img style="width: 20px; height: 20px; display: block; border :0;" onerror="this.src=';"/>
</td>
<td style="padding-top: 16px; padding-left: 10px">
<a style="color:rgb(126, 122, 122);filter: brightness(100); font-size: 9px" style="color: white;"> N'imprimez que si nécessaire </br> Pensez à l'environnement</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td alt="" title="" style="min-width: 50px; width: 100px; height: 100px; border:0;">
<img src="" style="min-height: 50px; min-width: 50px; width: 100px; height: auto; display: block; border: 0;margin-top: 50px;"/>
</td>
<!-- ------------------------------ -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
The media element is not supported. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
The fact is that Outlook uses Word as an editor and rendering engine for message bodies.
How can I fix my margin and padding section in the email template to properly align my images in different columns ?
I have inserted a full image and also partial code below. Thank you.
<tr>
<td valign="top" align="middle" >
<table border="0" cellpadding="0" cellspacing="0" width="100%;
background-color: #ffffff; padding; 20px;">
<tr>
<td bgcolor="#ffffff" style="display: inline-block; max-width: 270px; width: 100%;" align="center">
<img src="https://i.postimg.cc/sgw9MVx8/jug.png" alt="" style="max-width: 268px; width: 100%" border: 1px solid: #d5d5d5 />
<h3 style="margin: 10px 0px; font-family: sans-serif; font-size: 20px; color: #000000" > Jug </h3>
<p style="margin: 0; font-size: 16px; color: #444444; margin-bottom: 10px; "> 10% discounts</p>
</td>
<td style="display: inline-block; max-width: 20px; width: 100%" >
</td>
<td bgcolor="#ffffff" style="display: inline-block; max-width: 270px; width: 100%;" align="center">
<img src="https://i.postimg.cc/CK9LqX9G/apple.jpg" alt="" style="max-width: 268px; width: 100%" border: 1px solid: #d5d5d5 />
<h3 style="margin: 10px 0px; font-family: sans-serif; font-size: 20px; color: #000000" > Apple </h3>
<p style="margin: 0; font-size: 16px; color: #444444; margin-bottom: 10px; "> 10% discounts</p>
</td>
</tr>
</table>
</td>
</tr>
Both Images resolution should be of the same size.
I'm developing an HTML email that utilizes two columns for the desktop design and one for the mobile design. Instead of dealing with all the complexity of targeting specific elements of the desktop version with media queries and trying to make them work for mobile (doing this is a nightmare with emails..), I figured I'd make a completely separate table for mobile and make the desktop version disappear (display: none), at a breakpoint of below 450px.
Now, this works; however, on desktop (above 450px), where I set the mobile table to (display none; display: none !important;) there comes a problem. When opening the email on a screen size larger than 450px (IN GMAIL, not in a browser. I'm using a service called "freshmail" to test this), initially only the desktop table appears; however, none of the images are present. Gmail asks "Display Images Below" and clicking this rewrites my style-sheets such that the mobile table appears as well even though I explicitly tell it not too.
I know this is a tricky business, and I've tried many workarounds to overcome it, but none have worked. If anyone could help me accomplish this I would very much appreciate it.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
#media (min-width: 451px) {
#mobile {
display: none;
display: none !important;
}
}
#media (max-width: 450px) {
#desktop {
display: none !important;
}
#mobile {
display: block !important;
}
}
</style>
</head>
<body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;">
<table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black">
<tr>
<td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;">
<table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr style="">
<th>
</th>
<th style="padding-top: 20px;">
<span style="color: #504e4b;"/>
example text
</span>
</th>
</tr>
<tr style="padding: 0; background: #ffffff; color: #504e4b;">
<td colspan="2">
<img src="assets/example.gif" style="display: block;">
<img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="padding: 0px; border: none;">
</td>
</tr>
<tr style="height: 415px; color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.gif" style="display: block;">
</td>
</tr>
<tr style="vertical-align: top; color: #504e4b;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="text-align: right; padding: 0px;">
<img src="assets/example.png" align="right" style="display: block; padding-right: 20px;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;">
example text
</span>
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
</td>
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" colspan="2" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- mobile view -->
<table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;">
<tr id="date">
<th style="padding-top: 20px;">example text</th>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td style="padding: 20px;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
<img id="trend-top" src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img id="trend-bottom" src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;">
</td>
</tr>
<tr>
<td align="center" style="background: #ffffff;">
<img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;">
example text
</span>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try adding the mso-rules to your hide and un-hide. You can use basic break points as well, but I have found that also using the #media screen and (max-width:XXpx) is a better solution since most people don't carry around laptops that are less than 450 pixels wide.
Email design and development is pure a totally mixed bag, and I wish you luck.
All in all I would not take this approach to hiding and unhiding content. Outlook will ignore it entirely and Gmail will do (as you know) unpredictable things.
Here's link to a basic template I made Email template that might help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: collapse!important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse: collapse !important;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
#media (min-width: 451px) {
table#mobile {
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
#media (max-width: 450px) {
table#desktop {
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
table#mobile {
display: inline !important;
}
}
</style>
</head>
<body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;">
<table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black">
<tr>
<td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;">
<table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr style="">
<th>
</th>
<th style="padding-top: 20px;">
<span style="color: #504e4b;"/>
example text
</span>
</th>
</tr>
<tr style="padding: 0; background: #ffffff; color: #504e4b;">
<td colspan="2">
<img src="assets/example.gif" style="display: block;">
<img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="padding: 0px; border: none;">
</td>
</tr>
<tr style="height: 415px; color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.gif" style="display: block;">
</td>
</tr>
<tr style="vertical-align: top; color: #504e4b;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="text-align: right; padding: 0px;">
<img src="assets/example.png" align="right" style="display: block; padding-right: 20px;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;">
example text
</span>
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
</td>
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" colspan="2" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- mobile view -->
<table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;">
<tr id="date">
<th style="padding-top: 20px;">example text</th>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td style="padding: 20px;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
<img id="trend-top" src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img id="trend-bottom" src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;">
</td>
</tr>
<tr>
<td align="center" style="background: #ffffff;">
<img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;">
example text
</span>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>