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>
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.
Desperately looking for help with determining if there is the possibility to ignore css styles on my wordpress website?
My friend asked me for help in creating the site of his new company at the beginning I wanted to refuse but it is a good friend, so I thought "I will install wordpress, a few clicks and done". Now it has come to me how much I have underestimated the frontend devs and through what hell they are going through to ensure the responsiveness of the site with the help of this ... css.
I apologize for this introduction but for a few hours I am trying to make a very simple responsive table in html. It turned out that I'm doing everything correctly but my wordpress skin changes the style of almost all tags that I want to use, for example, table, tr, td and to "reset" the css style for this element my html fragment instead of clean nice html is HELL!
Every html element inherits from theme and I have to "reset" it to "default" values.
<table style="border: none; vertical-align: initial; table-layout: fixed; padding: 10px 10px 10px 10px;" cellpadding="5">
<tbody>
<tr>
<td style="border: none;">
<table style="border: none !important; vertical-align: middle; border-collapse: collapse; border-color: #ddddddd;" cellpadding="5">
<tbody style="border: none;">
<tr>
<th style="border-color: #21288f; text-align: center;" colspan="2"><span style="border: none; color: #21288f; text-align: center;"> FACILITY MANAGEMENT </span></th>
<th style="border: none;"></th>
</tr>
<tr style="border: none; vertical-align: middle; padding-bottom: 0px; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em; height: 10%;" valign="middle">
<td style="border: none; padding: 10px 10px 10px 10px; vertical-align: middle; display: block margin-bottom: 0em;" valign="middle"><img style="min-width: 30px; min-height: 30px; ;vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em;" valign="middle"><span style="color: #21288f;">TEXT1</span></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em;" rowspan="6" valign="middle"></td>
</tr>
<tr style="border: none; vertical-align: middle; padding-bottom: 0px; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT2</span></td>
</tr>
<tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT3</span></td>
</tr>
<tr style="border: none; vertical-align: middle;">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
</tr>
<tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
</tr>
<tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
<td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
</tr>
</tbody>
</table>
</td>
<td style="border: none;"><img class="wp-image-630 aligncenter" alt="" width="322" height="255" />
<img class="wp-image-631 aligncenter" alt="" width="311" height="240" />
</td>
</tr>
<tr>
<td style="border: none;"></td>
<td style="border: none;"></td>
</tr>
</tbody>
</table>
I will take every advice on how to deal with it so that my posts do not inherit from the wordpress theme.
I would recommend to first look at the themes documentation, you may provide a link to the site or more specific information.
Maybe the theme provides some options or a tutorial for a child theme?
Anyways. Inline css attributes are taken over all but they may not be neccessary (sometimes they are)
Take a look at css specificity: https://css-tricks.com/specifics-on-css-specificity/
You need to find out what css selectors are beeing used to style the tables (browser dev tools) and then make stronger ones that overrides them, even if they are parsed before them.
you then can put them in a <style> tag before the table or somewhere else in a css file that gets not overwritten by updates(Child theme)
Update: after looking at https://demo.themegrill.com/spacious/wp-content/themes/spacious/style.css from the themes demo there is the table styling starting from line 54
you should be able to override it with
body table {
/* original values
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.5em;
width: 100%;
*/
}
body th {
/* original values
font-weight: bold;
border: 1px solid #EAEAEA;
padding: 6px 10px;
*/
}
body td {
/* original values
border: 1px solid #EAEAEA;
padding: 6px 10px;
*/
}
body caption,
body th,
body td {
/* original values
text-align: left;
*/
}
the easiest way for you is put that css into the themes Custom CSS option as this is a feature promoted here: https://themegrill.com/themes/spacious/#all-features
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>
I have these images. they work fine in Gmail , but when I see in outlook , then all the 5 images comes in single <tr> and extends the default width of table.
What I want is , first four images should be in the center of first line and if there are more images then , it should be in new line. but in the same <tr>. I don't want separate <tr>for the same. I have done this. It looks fine in Gmail. but it extends its width in outlook which I have to make them correct. I have read article regarding the same. but didn't get too much.
So , It would be great , If I get help for this issue.
Thank You.
<table width="600" cellspacing="0" cellpadding="0" border="0" style=" background: #fa4b00;margin: 0 auto !important; padding: 0px; max-width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; text-align: center;" >
<tr>
<td height="20"></td>
</tr>
<tr>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600; ">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: white; "> XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal ; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px; word-break: normal ; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;">XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
<p style="padding-bottom: 30px;"></p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
<p style="padding-bottom: 30px;"></p>
</td>
</tr>
</table>
You're setting the TDs to display:inline-block, which doesn't really make much sense for a table element. The whole point of a table cell is that it behaves like a table cell.
Maybe that's what the issue is; if you're using an Outlook app or whatever it'll have a different rendering engine to Chrome. So that rendering engine could decide to ignore display:inline-block on table cells.
I'm pretty sure if you just removed the table stuff and wrapped each image in a DIV instead it would work reliably.
jsFiddle