For whatever reason my text resizing is not working on iPhones, working fine on android, and in another email format. Can't seem to see any differences between the two files. The images also resize, seems to just be an issue with the text.
<head>
<style type="text/css">
/* Outlook link fix */
#outlook a {padding:0;}
/* Hotmail background & line height fixes */
.ExternalClass {width:100% !important;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
.ExternalClass td, .ExternalClass div {line-height: 100%;}
/* Image borders & formatting */
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
/* Re-style iPhone automatic links (eg. phone numbers) */
.applelinks a {color:#222222; text-decoration: none;}
/* Hotmail symbol fix for mobile devices */
.ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; }
/* Media Query for mobile */
#media screen and (max-width: 480px) {
/* This resizes tables and images to be 100% wide with a proportionate width */
table[class=emailwrapto100pc], img[class=emailwrapto100pc]{width:100% !important; height:auto !important;}
/* Hide stuff on mobiles */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
td[class=emailcolsplit]{width:100%!important; float:left!important;}
a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; margin:10px auto;width:100%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}
/* This resizes body text for mobiles */
span[class=emailbodytext],a[class=emailbodytext]{font-size:16px !important; line-height:21px !important;}
}
#media screen and (min-width:1024px) {
a[class=emailmobbutton]{display: none !important;}
span[class=emailmobbutton]{display: none !important;}
}
<table style="padding-top:20px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="" target="_blank">
<img height="216" width="216" border="0" src="" style="display: block;" class="emailwrapto100pc" />
</a>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;padding-left:10px;padding-right:10px;">
<a href="" style="text-decoration: none; color: #111111">
<span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Hugo Boss Black</span>
</a>
</td>
</tr>
<tr>
<td width="33%" align="center" style="padding-top:5px;padding-bottom:10px;padding-left:10px;padding-right:10px;">
<a href="" style="text-decoration: none; color: #111111">
<span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Bugnara Polo T-Shirt</span>
</a>
</td>
</tr>
<tr>
<td align="center" width="33%">
<a style="text-decoration:none;background-color:#000000; color:#ffffff; padding:5px 20px; font-family:tahoma, sans-serif;font-size:12px;line-height:20px;" href="">
SHOP NOW</a>
</td>
</tr>
</table>
Any help would be greatly appreciated.
I have ran into an issue where I was working with email provider that did not allow modifications in
<head>
section, and my one
<style> #media ...</style> code did not work.
With email we have to think back rather than forward in time. Try writing you media query as a separate block section. I've tried this method & it worked without a hitch on Android, where the previous method failed.
`<style type="text/css">
/* standard styles */
</style>
<style media="screen and (max-width: 480px)">
/* responsive styles */
</style>`
Hope this helps you out.
Related
I have a pretty simple unordered list with some links in an html email that generated by a server. It looks and works as expected in most email clients (gmail, apple mail, outlook web), but in Outlook desktop some of the links don't work, seemingly at random.
Specifically, some of the links (all from the same list) work, some don't. When they don't, they don't appear as links: they're not underlined and the cursor doesn't change when you mouse over them.
Here's the code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>New Lead</title>
<style>
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] h2 {
margin-bottom: 5px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#media all {
.btn-primary table td:hover {
background-color: #229422 !important;
}
.btn-primary a:hover {
background-color: #229422 !important;
border-color: #229422 !important;
}
.statusLinks a {
color: #870a0a
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">New lead from Bill Jones of Jason Test 20220511 B</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="margin-top: 20px; border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<img src="http://company.com/logo.png" alt="company logo" width="227" height="31" border="0" style="-ms-interpolation-mode: bicubic; max-width: 100%; padding-bottom: 2em; border: 0; outline: none; text-decoration: none; display: block;">
Hello,
<br/>
<br/>The following sales lead has been assigned to you based on the inquiry sender's location and needs.
<br/>
<br/>Please process the lead within 24 hours; contact the inquiry sender (when needed) and select the correct status or delegate the lead to someone else. Options are listed in the bottom of this email.
<br/>
<br/>
<h2>Lead Details</h2>
<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" style="display:block; width: 100% !important; margin-bottom: 20px"><tbody>
<tr><td style="color: #888888; font-size: 12px;"> ID#:</td></tr>
<tr><td style="padding-left: 10px;">218271</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Source:</td></tr>
<tr><td style="padding-left: 10px;">Manually-added lead - Outbound Calls</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Status:</td></tr>
<tr><td style="padding-left: 10px;">Awaiting Sales Action</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Generated Date:</td></tr>
<tr><td style="padding-left: 10px;">12 May 2022</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Company:</td></tr>
<tr><td style="padding-left: 10px;">Jason Test 20220511 B</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Location:</td></tr>
<tr>
<td style="padding-left: 10px;">
United States
</td>
</tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Contact:</td></tr>
<tr><td style="padding-left: 10px;"><div><div style="margin: .3em 0"><span style="margin-right: .25em; border: 1px solid #ccc;padding:.25em">Bill</span> <span style="border: 1px solid #ccc;padding:.25em">Jones</span></div></div><div>jason#company.com</div><div>Marketing Allowed: No</div></td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Interest:</td></tr>
<tr><td style="padding-left: 10px;">Training</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Customer Comment:</td></tr>
<tr><td style="padding-left: 10px;">
--
</td></tr>
</tbody></table>
<table role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #F7ACAD; border-radius: 3px; width: 100%;" width="100%">
<tr>
<td style="padding:10pt">
<h2 style="margin-top:0">Update Lead Status</h2>
<p>Please process this as soon as possible and select one of the options below. For detailed information of the categories, please review your Sales Handbook.</p>
<ul class="statusLinks">
<li>Qualify</li>
<li>Mark as Non-Sales Inquiry</li>
<li>Work-In-Progress</li>
<li>Mark as Disqualified</li>
<li>Mark as Junk / Solitication</li>
<li>Send to Dealer</li>
<li>Mark as Career / Media / PR / Sponsorship / Supplier Inquiry</li>
<li>Delegate to Someone Else</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr style="clear: both; border: 0; border-bottom: 1px solid #cacaca; margin: 20px 0;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">Your feedback is always appreciated.</p>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer" style="clear: both; margin-top: 10px; text-align: center; width: 100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
©2022 product, a product of Company.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
Some relevant details:
The email uses the Cerberus html template.
There are no list specific styles in play outside of changing text color (no positioning or z-index stuff, etc.)
I can't replicate it myself at all; my user can't replicate it on demand either, but sees the problem routinely.
As far as I can tell the user is using the most up to date version of outlook desktop with no plugins.
Questions
Is anyone else seeing this problem?
Are there any obvious problems with my markup?
Are there any ways to lint/validate html emails for outlook standards?
Updates:
20220513 Stabbing around in the dark, I noticed if you change the zoom in the separate message window some of the links no longer work. They still look like links, but the hover and click actions no longer work. This might be related.
20220513 With some more messing around, when viewing the message in the separate, just scrolling up and down changes whether or not the links work. This has got to be some kind of outlook bug.
I have email template with simple css. I send email to user but it show css code to user and template is not working correctly.
I test by sent email to myself on Gmail It work correctly.
and problem is I don't have enough data what kind of email client that they use.
If it possible I want to avoid using email with text only.
First image is what user get.
Second image is what I test and got on gmail
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px) {
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> We're thrilled to have you here! Get ready to dive into your new account. </div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#2194F4" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#2194F4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">We're excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 30px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#2194F4">
Confirm Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#65F489">
View Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">Cheers,<br> Team</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
When you send an email like this you will want a fallback. The person receiving the email can set the email up so he will see text only. You want to create a multipart message. This might help you out, so both types get content. Multipart MIME Email Guide or here: How do I send a multipart email (both HTML and plain text)
It looks like you're forwarding the email - emails will get reformatted according to the native styles of the specific email application. There's very little we can do to control that. If you want to test what it will look like, you need to send to them directly. You can use something like https://putsmail.com/ if you need.
However, not sure why the #font-face declaration are showing on forward. They shouldn't be. I suggest removing them from the #media screen { ... } - you don't need that. Just have #font-face { ... } declarations on their own.
I'm setting up a new email signature for my client which needs to be responsive .
I tried out one layout which includes div , tables etc which works out good on desktops but not on mobiles .
Below is one such sample but the email appears as same is desktop & mobile with the cells / divs shifting one under the other .
As a part of my research , i tried using this email boilerplate which ended up in the same way . - https://github.com/seanpowell/Email-Boilerplate
<!--[if gte mso 9]>
<table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email {qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}
</div>
<!--[if gte mso 9]>
</td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong>
</div>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
https://jsfiddle.net/623y57p1/1/
Have a look at the demo i made . This is responsive in browsers , but not in outlook .
I created a sample code that works with Outlook. The two columns of this email footer will display side-by-side if the viewing window is wider than 580px. If it goes below that width, it will revert to two stacked columns. You can set the width breakpoint by adjusting <td width="290">.
<table align="center" role="contentinfo" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
<tr>
<td width="290" style="direction: ltr !important; display: inline-block;">
Column A
</td>
<td width="290" style="direction: ltr !important; display: inline-block;">
Column B
</td>
</tr>
</table>
Please keep in mind a few caveats:
Outlook 2007-2019 does not support responsive email. There is no support for #media queries.
The width for the table must be set to <table width="100%">.
The width for the table cells to 290 because the maximum width for an Outlook viewing window is 580px.
You can turn off <table border="1"> It's on for demonstration purposes.
<table role="contentinfo"> supports screen readers. Please leave it to help visually impaired users know about the structure of your email message.
https://jsfiddle.net/wallyglenn/w0s4xmc0/60529/
Good luck.
I'm looking to display an image/(or a td) only when the email is opened in a mobile browser.
This is what I've implemented so far, and it does not work in Gmail:
.resetimage {
display: block !important;
max-height: inherit !important;
width: auto !important;
}
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="padding:0px 0px 30px 0px;" width="100%">
<img class="resetimage" data-assetid="34095" height="132" src="imageurl.jpg" style="display:none; max-height:0; width:0;">
</td>
</tr>
</table>
Is it not possible to render only on mobile for Gmail?
It could be because class you've posted is .displaymobile but the img element has a class of .resetimage
This is effective with any email client that uses #media queries:
<style>
.showmobile {
display: none !important;
}
#media screen and (max-width: 600px) {
.showmobile {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
line-height: inherit !important;
}
}
</style>
In the body:
<table class="showmobile" style="display: none; mso-hide: all;">
<tr>
<td align="center" class="showmobile" style="display: none; mso-hide: all;">
Hello mobile
</td>
</tr>
</table>
This helps hide the content of the mobile-only from Outlook.
This will not work in Android 6 email, Android 4.4, Outlook for IOS (other issues).
Good luck.
I am trying to create a responsive two-column row (in a table) using media-queries for an email. Using the table align method from Mailchimp, it looks great on desktop and Android. On iPhone, the media query tells the "templatecolumnContainer" to display 100% width of the screen under 480px, but it only fills 50%. The other column container, does wrap underneath the image and stretch the width of the viewport.
Here's the media query -
#media only screen and (max-width: 480px) {
.templateColumnContainer2 {
display: block !important;
width:100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
And here's the two columns -
<table align="center" border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: inline-block !important;padding-bottom: 15px;" width="750">
<tbody>
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
<tbody>
<tr>
<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
<img class="columnImage" src="image.jpg">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
<tbody>
<tr>
<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;" valign="top">
<h3 style="color: #606060 !important; display: inline; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
<p>Some paragraph text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I'd be eternally grateful if anyone can fill in whatever coding gap I'm omitting!! Thanks in advance.
This should do what you ask:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
#media screen and (max-width: 750px) {
#templateColumns {
width: 100% !important;
}
.templateColumnContainer2 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
}
</style>
</head>
<body width="100%" style="Margin: 0;">
<center style="width: 100%;">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="750" style="margin: auto;" id="templateColumns">
<tr>
<td class="templateColumnContainer2" width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
<img class="columnImage" src="image.jpg" width="100%" height="auto">
</td>
</tr>
</table>
</td>
<td class="templateColumnContainer2" width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;">
<h3 style="color: #606060 !important; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
<p>Some paragraph text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
I'm not sure what parent HTML you have above this, but I included the <body> and <center>, and slightly rewrote the <table> markup + classes to achieve a responsive layout that stacks once the viewport dips below the <table>'s desktop width of 750px.