I set up a simple 2-column (on desktop screens) HTML Email based on code I got from a manual (course I did some time ago). When I tested the email I found it displayed correctly on Android mobile phones (the 2-column display changes to a 1-column display as required), however, when viewed in iPhone 5 (haven't tried iPhone 6 or greater) the email does not behave responsively i.e. the 2-column display does not change to a single column display as it should.
See email code CSS/ HTML below. I've also set up a CodePen at:
https://codepen.io/Ben10/pen/GvGgZo
I wonder if anyone can point out what is wrong with (or missing from) the CSS/HTML code. How can I fix this problemo? I've checked around the web but I'm now more confused than ever. HTML email seems to be a minefield of problems.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date Night Exclusive Picks Inlined Complete</title>
<style>
#media only screen and (max-width:680px){
/*.wrapper{*/
table[class="wrapper"]{
max-width:680px !important;
width:100% !important;
}
td[class="deviceWidth"]{
display:block !important;
padding:0 !important;
width:100% !important;
}
td[class="row"]{
padding:15px 10px !important;
}
[class="deviceWidth"] p{
font-size:16px !important;
}
a[class="bookLink"]{
font-size:16px !important;
}
/*.resImg{*/
img[class="resImage"]{
height:auto !important;
width:100% !important;
}
/*h1{*/
[class="wrapper"] h1{
font-size:24px !important;
}
[class="wrapper"] h2{
margin-top:15px !important;
}
} /* close media query max-width:680px */
#media only screen and (max-width:480px){
td[class="mobileBanner"]{
background-image:url(http://www.nobledesktop.com/nl-date-
night/img/header-mobile#2x.png) !important;
background-repeat:no-repeat !important;
background-position:center top !important;
background-size:cover !important;
}
[class="mobileBanner"] img{
display:none !important;
}
[class="mobileBanner"] a{
display:block !important;
padding-top:43.333% !important;
}
} /* close media query max-width:480px */
</style>
</head>
<body style="margin: 0;">
<table class="wrapper" align="center" border="0" cellpadding="0"
cellspacing="0" width="680">
<tr>
<td class="mobileBanner" align="center" width="100%">
<p class="preheader" style="color: #ffffff;font-family: Helvetica,
Arial, sans-serif;font-size: 2px;line-height: 140%;margin-bottom:
0;margin-top: 0;display: none;">Punch-drunk in love? Go boxing with your
sweetheart. This and more great dates inside!</p>
<a href="#" target="_blank"><img class="resImage"
src="http://www.nobledesktop.com/nl-date-night/img/header.png"
width="680" alt="Date Night" style="display: block;border: none;" moz-do-
not-send="true"></a>
</td>
</tr>
<tr>
<td align="center" width="100%">
<!-- NESTED TABLE -->
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td class="mainContent" align="center" width="100%"
style="padding: 20px;border-bottom: 10px solid #e64a33;">
<h1 style="color: #69655c;font-family: Arial, Helvetica,
sans-serif;font-size: 40px;font-weight: bold;margin: 0;">This Week’s
Exclusive Picks</h1>
<!-- LISTING ONE -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;">
<table align="center" border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-
night/img/couple-boxing#2x.jpg" width="290" alt="Couple Fighting"
style="display: block;border: none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">OUT OF THE BOX DATES: BOXING
FOR TWO</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">If you
enjoyed our punny joke, you’ll love our selection of unique and out
of the box dates. They’re designed to ignite a budding relationship
or bring some new spark to an old flame. Dinner and drinks is
yesterday’s news, so get geared up and fight it out in the ring or
take it down a level with lazy river meditation. Expect to see a new and
exciting date added to the date book every week. <a class="bookLink"
href="#" target="_blank" style="color: #e74b34; font-size: 10px; font-
weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LISTING TWO -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;" bgcolor="#eeeeee">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/beer-
bar-label#2x.jpg" width="290" alt="Open Bar" style="display: block;border:
none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">NEW BAR CRAWL PACKAGE—ALSO AS
A DOUBLE DATE!</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You asked
and we delivered! Introducing our first optional double date package, the
Couples’ New York Bar Crawl. Spend a Friday or Saturday night
exploring the nightlife in a new area with your loved one and friends.
You’ll visit five different bars in close proximity to each
other—no cabs or transportation required. Most importantly, the
first drink at every bar is on us! Check it out now for the special grab a
date price! <a class="bookLink" href="#" target="_blank" style="color:
#e74b34;font-size: 10px;font-weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LISTING THREE -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;">
<table align="center" border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/milan-
canal#2x.jpg" width="290" alt="Canal Cruise - Milan" style="display:
block;border: none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">DELUXE WEEKEND: FAR-FLUNG AND
ROMANTIC</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You two are
so busy that a 7-day work week is all too familiar. Time to de-stress and
take a weekend to remember why you work so hard. Put your routine on pause
and enjoy a short vacation to an enchanted location. Choose from over 15
exotic remote and not-so-remote locations. Weekend date prices include a
hotel for two, a bottle of wine, and a planned activity. <a
class="bookLink" href="#" target="_blank" style="color: #e74b34;font-size:
10px;font-weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
First of all a table get responsive. Responsiveness only works upto some extend. you should use div and give float property to them. For example
<style>
.div1 {
max-width:680px !important;
width:100% !important;
}
.div1 > img {
max-width:200px !important;
width:100% !important;
float: left;
}
.div1 > .text-div {
max-width:480px !important;
width:100% !important;
float: right;
}
.clear-fix
{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</style>
<div class="div1">
<img src=""/>
<div class="text-div">
<h5>OUT OF THE BOX DATES: BOXING FOR TWO</h5>
<p>If you enjoyed our punny joke, you’ll love our selection of unique and out of the box dates.
They’re designed to ignite a budding relationship or bring some new spark to an old flame.
Dinner and drinks is yesterday’s news, so get geared up and fight it out in the ring or take it down a level with lazy river meditation.
Expect to see a new and exciting date added to the date book every week.</p>
</div>
</div>
And don't forget to add this meta tag in your head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
you can find about clear-fix here:
What is a clearfix?
Related
I have been working on an html email. It has generally worked in tests but gets mangled in Outlook. I have seen the questions on here and have been reading a decent amount on it, but after trying a variety of fixes nothing's worked. I am a total novice using dreamweaver, so I know the code might be horrendous:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>EmailTemplate-Hybrid</title>
</head>
<body width="100%" bgcolor="#FFFFFF" style="margin: 0;" yahoo="yahoo">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Historic Renovation. </div>
<!-- Visually Hidden Preheader Text : END -->
<div style="max-width: 100%;">
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width"100%" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table width="60%" height="auto" align="right">
</table></div></center></td><td style="font-size: 2.75vw;"><a style="color: black" href="http://www.ernstbrothers.com/gallery/residential/">GALLERY </a></td>
<td style="font-size: 2.75vw;"><a style="color: black" href="http://www.ernstbrothers.com/services/">SERVICES</a></td>
</tr></table>
<table class="container " width="100%">
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b9d5dc85-0cfc-470f-a3e6-7abaffb8849d.jpg" width="100%">
</td>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table width="100%">
<tr>
<td style="background: #FFFFFF; font-size: 4vw; font-family: serif; text-align: right " width="100%" height="125px"><blockquote>
<p><a style="color: black" href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/">HISTORIC RENOVATION</a> </p>
</blockquote>
</td>
</tr>
</table>
<!-- 1 Column Text : BEGIN -->
<table width="100%">
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b1bd7d4c-a5f9-4081-a543-b94b4cf6d9d2.jpg" width="100%">
</td>
</tr>
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/328fa1bb-1858-4f8c-9c89-2002fd132365.jpg" alt="" width="100%">
</td>
</tr>
</table>
<table>
<tr>
<td>
<h1 style="font-family: sans-serif; text-align: left; font-size: 4vw; line-height: auto; padding-top: 20px; padding-left: 20px; color: #000000;"> Another Project in <span style="color: #4CA7A0"><a style="color: teal" href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/">Bucks County!</a></span></h1>
</td>
</tr>
<tr>
<td>
<p style="text-align: center; font-family: sans-serif; font-size: 3vw; line-height: auto; color: #000000"> Ernst Brothers is fulfilling the new owners vision for this property in Solebury, creating a serene guest house from the bones of this 18th-century farmhouse.</p>
</td>
</tr>
</table>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="right" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/" style="background: #222222; border: 15px solid #222222; padding: 0 10px; color: #ffffff; font-family: sans-serif; font-size: 2.75vw; line-height: 1.1; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->Read <span style="text-align: left"></span>More
<!--[if mso]> <![endif]-->
</a>
</td>
</tr>
</table>
<!-- Button : END -->
<!-- Visit US : BEGIN -->
<!-- Two Even Columns : END -->
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table width="100%">
<tr>
<td>
<a href="http://www.ernstbrothers.com/contact-us/"><img style="padding-top: 40px; display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/374d5aa5-5dd8-4a96-89e2-2a392f6092c3.jpg" alt="" width="100%">
</a></td>
</tr>
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/4441e9d8-1138-44e9-95ee-cd59c1019d9d.jpg" width="100%">
</td>
</tr>
</table>
<table width="100%" height="200px" style="background: #FEFDFD">
<td style="text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size: 4vw; line-height: auto;"><a style="color: black" href="http://maps.apple.com/?q=Ernst+Brothers&sll=40.186293,-75.227316&z=10&t=s"> 1104 North Bethlehem Pike <br>
Spring House, PA 19477</a></td>
</table>
<table width="100%" height="147" border="1" align="center" style="background-color: darkgrey">
<tbody>
<tr>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/391b81fc-92ee-4072-b859-dc538485f046.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/e5447cda-cd97-45b1-9411-6703b985f3b2.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b88e145d-feda-4b66-86fe-6aea5083e760.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/ba8cce9e-385a-4827-964d-fa608ffce6b2.png" alt="" width="80%"></td>
<td width"40%" style="font-size: 3vw; font-family: sans-serif; text-align: center"><a style="color: white" href="tel:+2154535124">215-453-5124</a></td>
</tr>
</tbody>
</table>
<!-- Email Footer : END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to *|EMAIL|*
<br>
<em>why did I get this?</em> unsubscribe from this list update subscription preferences
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
#media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></body>
</html>
Here is how it's intended to look, opened in chrome from the .html on my desktop. IMG
Here is what it looks like in Outlook. IMG2
Any help would be greatly appreciated.
Email is NOT front-end Web development. I used to use Dreamweaver for email development but had to abandon it since it would not let me use a mix of html 5 and older versions. That's the problem, email programs support a limited version of CSS3 and some don't support it at all.
Outlook is notorious because it doesn't follow a standard HTML rendering engine like Webkit. It's based on Microsoft Word.
Widths
Outlook doesn't really support a width wider than 800px. Gmail is similar. So width=100% will give you inconsistent results.
Fonts
Outlook straight up doesn't understand something like style="font-size: 2.75vw;" Try something like style="font-size: 18px;"
Images
For images, Outlook will respect a something like <img width="580"> but may not respond to <img width="100%">. I find it ignores widths in the inline style, but other programs use them very well.
Try something like this:
<img src=""http://www.gwally.com/news/photos/catintinfoilhat.jpg"
alt="A boy and his cat" width="580" align="center" style="max-width: 100%; width: 580px;"/>
I'm having issues getting my testing accounts to work, so I can't give as much help as you need. I think if you address these issues, it will take you further down the path to a consistent email.
For further information, this is a great resource on what works in email:
http://campaignmonitor.com/css/
I have a problem with my email signature. It gets messed up when replying in Outlook.
What is happening: When I send an email with the signature from Outlook 2016 (on Mac) to Outlook 2007 (on Windows) it looks good. When replying to that email it still looks good. When replying to that email the signature gets messed up. Screenshot: enter image description here
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">
<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 type="text/css">
/* Client-specific Styles */
#outlook a {
padding: 0;
} /* Force Outlook to provide a "view in browser" menu link. */
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
width: 100%;
} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
} /* Force Hotmail to display normal line spacing. */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
}
}
</style>
</head>
<body>
<div class="block">
<!-- Start of name, function title and logo -->
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<span style="text-align: left; color: #9C1C27;font-size: 15px; font-weight: bold">Voornaam en Achternaam</span><br/>
<span style="text-align: left; color: #B5987F; font-weight: normal; font-style:italic; font-size: 14px;">Functie titel</span><br/>
</td>
</tr>
<tr>
<td>
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px; padding: 10px 0 5px 0;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" />
</td>
</tr>
</tbody>
</table>
<!-- End of name, function and logo -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
<tr>
<!-- Start of first column -->
<td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column -->
</td>
</tr>
</table>
<!-- Start of branding identity elements -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td style="height:3px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
<tr>
<td style="height:2px; width:100%; background-color:#fff;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
</td>
</tr>
</table>
<!-- End of branding identity elements-->
</td>
</tr>
</table>
</div>
</body>
</html>
Why is this happening and how can I fix this?
I sent your message to me from http://putsmail.com to my Outlook address, replied to my gmail and then replied back to my Outlook and got this:
When I replied back to gmail, it looked fine.
My suggestion is to add valign="top" to your tr and td cells in the table in question. This will force the table cells to align.
`
<!-- Start of first column -->
<td valign="top">
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column -->
</td>
</tr>
</table>
<!-- Start of branding identity elements -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td style="height:3px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
<tr>
<td style="height:2px; width:100%; background-color:#fff;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
</td>
</tr>
</table>
<!-- End of branding identity elements-->
</td>
</tr>
`
Solved it! I first removed all align attributes which helped to put the columns next to each other. I then removed all the tables and made one "wrapper" table with a table nested in to this wrapper table which contains everything. Hope I'm describing this clearly, lol. Anyway this solved all my problems!
This is my code for anyone who is interested or has the same problems I did:
<!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">
<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 type="text/css">
/* Client-specific Styles */
#outlook a {
padding: 0;
} /* Force Outlook to provide a "view in browser" menu link. */
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
width: 100%;
} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
} /* Force Hotmail to display normal line spacing. */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td{
border-collapse: collapse;
border-spacing:0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
}
}
</style>
</head>
<body>
<div class="block">
<!-- Start of wrapper table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
<!-- Start of name, function title and logo -->
<tr>
<td style="padding-bottom:3px; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color: #9C1C27;font-size: 15px;">Voornaam en Achternaam</strong><br/>
<em style="color: #B5987F; font-weight: normal; font-size: 14px;">Functie titel</em><br/>
</td>
</tr>
<tr>
<td style="padding-bottom:5px;">
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="display:block; width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" />
</td>
</tr>
<!-- End of name, function and logo -->
<!-- Contact info and Start of first column -->
<tr>
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
<!-- End of first column -->
<!-- Start of second column -->
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
<!-- End of second column -->
<!-- Start of third column -->
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</table>
<!-- End of third column and contact info -->
<!-- Start of branding identity elements -->
<tr>
<td bgcolor="#B5987F" style="height:3px; width:100%;"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="height:3px; width:100%;"></td>
</tr>
<tr>
<td valign="middle" bgcolor="#9C1C27" style="height:30px; width:100%;">
<center>
<img style="display:block;"src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan" />
</center>
</td>
</tr>
<!-- End of branding identity elements -->
</td>
</tr>
</table>
<!-- end of wrapper table -->
</div>
</body>
</html>
Welll, as they say: "Email is hard".
In general, it is a good practice to inline the CSS styles when doing stuff for emails. I use this tool from Litmus, and they also have a pretty good article about the pitfalls of developing HTML content that looks good for emails (gmail specifically).
I have am trying to figure out how to have 3 columns in a table row but hide the first or the last depending on whether it's mobile or desktop. My original thought was to add another TD to the bottom and hide one via css with media queries but that didn't seem to work very well.
Desktop view with alternating images
Mobile view which needs the picture with the lady with the graduation hat above the What is a beneficiary grey box.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center" valign="middle">
<td align="center" width="50%" class="column" valign="top" style="text-align:left; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#44464a; line-height:1.4; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;"> <img class="person" src="c29229/c29229_4seasons_photos_2.jpg" alt="photo of people" style="width:300; height:auto; border:0 none; display:block;" /> </td>
<td align="center" valign="middle" width="50%" class="column" style="text-align:center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#ffffff; line-height:1.4; padding-top:0px; padding-right:30px; padding-bottom:0px; padding-left:30px; background-color: #ab811d;">
<h2 style="text-align:center; font-weight: normal !important; font-size: 24px; color:#ffffff; margin-bottom: 20px !important;">
<div class="spacer" style="padding-top: 40px; display:none;"> </div>
Complete your beneficiary designation
</h2>
<p style="margin-bottom:0px;">Vea esta correo electrónico en español</p>
</td>
</tr>
</table>
There is a way to do this without relying on media queries, if you'd like total coverage in all email clients. Using the dir attribute along with max-width, you can specify which <td> appears first on wide.
Start by laying out each table 2-column row in a mobile-first manner: The image in the first <td> and the text in the second. Because of the source order, when these layers stack the image will always be on top on the text. Once the column widths exceed their max-width, they'll stack without needing media queries.
This solves mobile, but how do you make some images appear in the right column on desktop? That's where dir comes in. Adding dir=rtl at the parent <td> causes containing elements to run in reverse. So the last column appears first.
Here is a basic example:
<tr>
<!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="http://placehold.it/200" width="300" height="" border="0" alt="" style="width: 100%; max-width: 300px; height: auto;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr"> <!-- Don't forget to switch dir to ltr here, or else text runs in reverse -->
Text Goes Here
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
If you layout each <tr> in a manner like this which the image in the first column, swapping the order of the columns in each row can be achieved by adding a dir=rtl to the parent <td>.
E-Mail-Clients are a bit tricky with their CSS.
You can order them the way you want them to be on mobile, and then add the following using for desktop:
position: relative;
left: -50%;
The remaining code depends on how you switch between two-column and one-column layout.
Most modern Mail programs support flexbox. With flexbox, you can re-order elements using the order property or by setting the direction to row-reverse.
I'm having trouble getting an email blast to hide and display the h2 and ul tags. It works just fine in outlook and in most browser but on the iphone the display:block attribute is not respected. I also tried wrapping the content in a div tag and the attributes were ignored. Any ideas?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WalkGreen™ Capabilities</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#media (max-width: 767px) {
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none !important;
}
}
/* Media Query for mobile */
#media screen and (max-width: 480px) {
h2[class=visible-xs], ul[class=visible-xs] {
display: block !important;
}
p[class=align-center]{text-align:left !important;}
/* This resizes tables and images to be 100% wide with a proportionate width */
table[class=emailwrap], img[class=emailwrap]{width:100% !important; height:auto !important;}
h2[class=mobile-pad]{padding-left:8px !important; padding-right:8px !important;}
img[class=logo-sm]{width:35%;}
img[class=img-mob]{width:90% !important; height:auto !important;}
img[class=mbl-icon]{width: 32px !important; height:32px !important;}
td[class=mbl-pad-1]{padding-left:16px !important; padding-right:16px !important;}
td[class=mbl-pad-2]{padding-left:16px !important; padding-right:16px !important; text-align:left !important;}
td[class=mbl-pad-3]{padding-top:16px;}
td[class=border-off]{border-bottom:0 !important;}
a[class=mbl-button]{webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding-top:10px !important; padding-right:10px !important; padding-bottom:10px !important; padding-left: 10px !important; font-size:18px !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; border-radius:5px !important; margin:10px auto;width:70%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}
/* This resizes body text for mobiles */
ul[class=emailbodytext],span[class=emailbodytext],a[class=emailbodytext] ,p[class=emailbodytext]{font-size:16px !important; line-height:21px !important;padding-right:16px !important;}
h2[class=emailh2],span[class=emailh2],a[class=emailh2]{font-size:22px !important; line-height:26px !important;}
td[class="mbl-header"]{padding-right:8px !important; padding-left:8px !important;}
}
</style>
</head>
<body style="background-color:#FFF;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- top disclaimer -->
<table class="emailnomob" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:8px; padding-right:8px; padding-bottom:8px; padding-left:8px; color:#999">
<span>TROUBLE SEEING SOMETHING? </span><a style="color:#999;" href="#">VIEW IT ONLINE</a> OR <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a>
</td>
</tr>
</table>
<!-- content begins -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td>
<!-- top banner -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<img class="emailwrap" src="images/top-banner2.gif" alt="Exotic Hardwood Decking, Rainscreen and Fencing" />
</td>
</tr>
</table>
<!-- 3 column content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mbl-pad-3">
<img src="images/products.gif" alt="Products" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Decking</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Angelyn <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
<li>Cumaru <br/> (1” x 5.5”) (1” x 3.5”) (7/8” x 5.5”)<br/> </li>
<li>Espresso Garapa <br/> (7/8” x 5.5”)<br/> </li>
<li>Gold Garapa <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
<li>Tigerwood <br/> (1” x 3.5”)<br/> </li>
</ul>
<h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Rainscreen & Siding</span></h2>
<ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none;">
<li class="emailbodytext">Profiling for any hidden siding fastener system</li>
</ul>
<h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Fencing</span></h2>
<ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none">
<li class="emailbodytext">Fence Boards</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/milling.gif" alt="Milling" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Custom Milling</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Tongue & Groove</li>
<li>Siding Profiles</li>
<li>Edge Grooving for hidden fastening systems</li>
<li>Anti skid decking</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/delivery.gif" alt="Delivery" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Options</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Large Volumes</li>
<li>LTL</li>
<li>Full Container or Trucks</li>
<li>Contractor Packs</li>
<li>Special Orders</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 column content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Rainscreen & Siding</h2>
<ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Profiling for any hidden siding fastener system</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Fencing</h2>
<ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Fence Boards</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><p class="align-center" style="text-align:right; margin-top:0; margin-bottom:0;"><img src="images/logos.gif" alt="US Greenbuilding Council, Rainforest Alliance, FSC Certificate" /></p></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- species heading -->
<table style="background-color:#4982a5;" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td align="center">
<img src="images/species.gif" alt="Species" />
</td>
</tr>
</table>
<!-- species thumbnails -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/angelyn.jpg "width="110" height="119" alt="Angelyn" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Angelyn</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/cumaru.jpg "width="110" height="119" alt="Cumaru" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Cumaru</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/garapa.jpg "width="110" height="119" alt="Gold Garapa" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Gold Garapa</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/espresso-garapa.jpg "width="110" height="119" alt="Espresso Garapa" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Espresso Garapa</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/tigerwood.jpg "width="110" height="119" alt="Tigerwood" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Tigerwood</h2>
</table>
</td>
</tr>
</table>
<!-- species content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">We Have Over 500,000 Lineal Ft. of stock on the ground at all times, ready for prompt shipment! </h2>
<p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">WalkGreen™ maintains a philosophy of stewardship, product quality and client satisfaction by preserving forest ecology and forest-dependent communities while supporting responsible and legal forestry. WalkGreen™ remains competitively priced by holding the largest inventory of FSC® Exotic Hardwood Decking and Rainscreen in North America. </p>
<h2 class="emailh2"style="font-size:18px; font-family: Arial, sans-serif;">General Wood Specifications</h2>
<p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">All wood is Export A grade, three side clear with minor defect down side. Kiln Dried to 12-15% moisture content. S4S E4E unless milled to specification. Random length 7-18 ft, odds and evens. 100% FSC® Certified</p>
</td>
</tr>
</table>
<!-- contact info -->
<table class="emailwrap" style="background-color:#fff; border-bottom: solid 1px #ccc;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="475" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:12px; padding-bottom:12px;">
<h2 class="emailh2" style="font-size:15px; font-family: Arial, sans-serif; margin-top:0; margin-bottom:0;">Text</h2>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="125" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:12px; padding-bottom:12px;">
<a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/facebook.gif" alt="Like us on Facebook" /></a>
<a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/web-graphic.gif" alt="WalkGreen Products Website" /></a>
<a style="margin-top:0; margin-bottom:0;" href="#"><img src="images/mail.gif" alt="Contact Us" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- footer -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="250" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:20px; padding-bottom:20px; padding-right:20px;">
<img src="images/walkgreen.gif" alt="WalkGreen Products" />
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="350" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:20px; padding-bottom:20px;">
<p style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#999;">IF YOU NO LONGER WISH TO RECEIVE EMAILS PLEASE <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a><br/>
© 2015 WALKGREEN™ PRODUCTS, ALL RIGHTS RESERVED</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Bad Media Queries
You have bad queries. i.e. an iphone6 plus is max-device-width : 736px, therefore not satisfying the latter query! See media-queries-for-standard-devices.
If you wish to fix this issue, you must first define what size is xs. It's not enough just to say ALL mobile phones, as some mobile phones have VERY big screen and look like tablets! Iphone 6 Plus is a prime example of a big phone.
If I understand this correctly:
hidden-xs should hide the h2 only for below a certain screen width and visible for the rest
visible-xs should show the h2 only for below a certain screen width and hidden for the rest
e.g. If you define xs as a screen width <= 767px then your CSS should be:
#media screen and (max-width: 767px) {
/* styles for screen width <= 767px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
}
#media screen and (min-width: 768px) {
/* screen width >= 768px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
}
or simplified to (mobile-first approach):
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
#media screen and (min-width: 768px) {
/* styles for screen width >= 768px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
}
or desktop first approach
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
#media screen and (max-width: 767px) {
/* styles for screen width <= 767px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
}
Note: the !important is likely unnecessary
You could try creating a class to hide elements that will not show on a phone
#media only screen and (min-width: 320px) and (max-width: 768px){
.hide_phone{display: none;}
}
So, I'm having issues with Outlook 2007/2010 spacing (border collapse?) issue.
Here is an image as to what it is doing (the Hurry Now.. text gets pushed down)
Here is what it is supposed to look like & works fine in all other email clients.
Here is my snippet of code for the Hero section
<table cellpadding="0" cellspacing="0" width="561" align="center" bgcolor="#4b88cf" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:40px; font-weight:normal; line-height:40px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="561" height="37" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> </td>
</tr> <!-- end spacer -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Save 10% on all</font></td>
</tr> <!-- heading -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">EasyACCT 2013 products.</font></td>
</tr> <!-- heading -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Only 4 days left!</font></td>
</tr> <!-- heading -->
<tr>
<td width="561" height="25" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
<!-- start button -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="left" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:14px; font-weight:normal; line-height:20px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" border="0" style="display: block;" alt="left side button"/></td> <!-- left side button -->
<td align="center" style="font-weight: bold; border-collapse: collapse;" bgcolor="#f0640f"><font color="#ffffff" style="text-decoration: none;">Renew Now to Save 10%</font></td>
<td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" border="0" style="display: block;" alt="right side button"/></td> <!-- right side button -->
</tr>
</table>
</td>
</tr>
<!-- end button -->
<tr>
<td width="561" height="15" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
<tr>
<td valign="top" width="561" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
</tr>
<tr>
<td width="561" height="23" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
</table>
This is a problem I've come across with Outlook 2007,2010 and of course 2013. They don't like small cells.
I've found this code has worked for me and gone through Litmus tests.
<tr height="1">
<td width="482" height="1" align="left" valign="top" background="#000000" style="background:#000000;font-size: 1px; line-height: 0px; mso-line-height-rule: exactly;"> </td>
</tr>
The mso-line-height-rule: exactly; is an outlook specific style. The font-size: 1px should match however much height you want your cell to be. The line-height: 0px; zero's out any line-height space.
HOWEVER, after testing your code snippet with the updated cells this doesn't seem to be the actual problem. I made the spacer cells black so I could better see what was actually going on.
The black spacer cell ends well above the copy, ie. it's not pushing your text down. The issue is actually the cell with the white copy in it.
I added a line height to the cell and removed the border-collapse:collapse; (you don't need it on individual cells. You may just want to double check your superscripts are all good.
<tr>
<td valign="top" width="561" style="font-size: 18px; line-height: 20px; color: #ffffff;"><font color="#ffffff">Hurry, offer ends October 31!<sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></font></td>
</tr>
This was the result:
Hope that helps.
Outlook has a minimum cell height of 19px, so the 15px cell you have as the spacer in seems to be expanding, evern though you have the font-size and line-height zero'd out.
An alternative way to do it, is instead of having your text sandwiched between two spacer rows, make 1 taller row and vertically center it instead:
<tr>
<td valign="middle" width="561" height="50" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
</tr>
Throughout your whole email, you don't really need separate rows for each line of text, just use <br> instead to separate the rows.
I agree with John. Just use the breaks to create vertical whitespace. You're making it more difficult for yourself, without any reason :-)
Just put the right attributes at their right place: your use of the font-tag is overwhelming, as is the border-collapse:collapse and the font-size:0; line-height:0;.
If you want to create a whitespace, give a height at the TD (20px) and style="font-size:20px; line-height:20px;", with a BR-tag inside (no nbsp).
See my example:
<table cellpadding="0" cellspacing="0" border="0" width="561" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr><td bgcolor="#4b88cf" align="left" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:40px; line-height:46px; color:#ffffff;"><br />Save 10% on all<br />EasyACCT 2013 products.<br />Only 4 days left!<br /><br /></td></tr>
<tr><td bgcolor="#4b88cf"><table cellpadding="0" cellspacing="0" border="0" align="left"><tr>
<td width="12" height="50" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" width="12" height="50" alt="" border="0" style="display:block;" /></td>
<td bgcolor="#f0640f" align="center" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:14px; line-height:20px; color:#ffffff;"><strong style="color:#ffffff;">Renew Now to Save 10%</strong></td>
<td width="14" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" width="14" height="50" alt="" border="0" style="display:block;" /></td>
</tr></table></td></tr>
<tr><td bgcolor="#4b88cf" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:18px; line-height:20px; color:#ffffff;"><br />Hurry, offer ends October 31!<sup style="font-size:12px; line-height:0; vertical-align:8px">1</sup><br /><br /></td></tr></table>