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).
Related
I have made an email signature for a client which works perfectly on everything except Gmail. When I try to use the signature in Gmail it somehow centers it. This is only on the browser version. When I view the signature in the mail app on the iPhone it looks good. When I send the signature to Gmail from, for example, Outlook it looks good too. A screenshot of the problem: click .
I have no idea why this happens so I hope someone here has the answer for me. My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-column layout</title>
</head>
<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. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#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;
padding: 0 20px 0 20px!important;
}
}
</style>
<body style="padding:0; margin:0">
<!--
/*##############################################*/
3 column
/*##############################################*/
-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td align="left" 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: 14px; font-weight: bold">Voornaam en Achternaam</span><br>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #B5987F; font-weight: normal; font-style:italic; font-size: 12px;">Functie titel</span><br>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 10px; padding-right: 0px; width:100%; height:100%;">
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo">
</td>
</tr>
</tbody>
</table>
<div class="block">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="600" align="left" 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" align="left" 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 -->
<!--[if mso]></td><td valign="top"><![endif]-->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" 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 -->
<!--[if mso]></td><td valign="top"><![endif]-->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<font>T:</font> 0031-024-3775233 <br>
F: 0031-024-3779316 <br>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl">sales#deleeuwhides.nl</a><br>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com">www.deleeuwhides.com</a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column --></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" style="margin-top:5px; margin-bottom:3px;" class="fluid-table">
<tr>
<td style="padding: 0 0 2px 0; height:1px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" class="fluid-table">
<tr>
<td valign="top"bgcolor="#9C1C27" style="height:30px; width:100%; background-color:#9C1C27;"><img style="display:block; margin:auto; padding:8px 0 0 0;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Thanks in advance!
Somehow I fixed this by starting to build the code line for line in a new .html document. Testing it every time in Gmail until the centering would occur again, but it never did. So now it is working like it should!
Have you tried float left in your outer table which has a class of fluid-table?
If that doesn't fix it, give the below a shot and let me know if it works.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width:100%; max-width:600px;">[signature content here]</td>
<td> </td>
</tr>
</tbody>
</table>
I have created a table with two columns, first column has max width of 600px and the second doesn't have a width. Place all the content into the first column. I have placed the style inline, you can move it to a class if you want to.
Cheers
I had the same issue and solved it by applying "margin:0 !important" to the signature main container.
I have spent all day reviewing fixes for my issue. My HTML looks great on all email clients except Outlook, by which the layout will not center in the preview. I've tried the <center> tag and fixing the .ExternalClass but nothing works. Can anyone help?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="telephone=no" name="format-detection">
<meta content="width=mobile-width; initial-scale=1.0; maximum-scale=1.0; user- scalable=no" name="viewport">
<meta content="IE=9; IE=8; IE=7; IE=EDGE" http-equiv="X-UA-Compatible">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<title>IAED ACE WEBSITE</title>
<style href="">a {text-decoration: none} </style>
<style type="text/css">
.mobile {
max-width:700px !important;
}
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {
border-collapse:separate;
}
a, a:link, a:visited {
text-decoration: none; color: #2a8acc;
}
a:hover {
text-decoration: underline;
}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {
color:#000 !important;
}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
line-height: 100%;
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
#media only screen and (max-width: 480px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em; }
}
#media only screen and (max-width: 320px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em;}
}
#media only screen and (max-width: 667px) {
.mobile {width: 95% !important; font-size:1.1em; border-collaps: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em;}
}
#media only screen and (max-width: 730px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em; }
}
</style>
</head>
<body bgcolor="#EFEFEF" style="margin: 0; padding: 0;">
<!-- SPACE-->
<table bgcolor="#EFEFEF" border="0" cellpadding="0" cellspacing="0" style=
"height:15px; background-color:#efefef; width:100%;" width="100%">
<tr>
<td>
</td>
</tr>
</table>
<!--end of space-->
<!-- HIDDEN PREHEADER -->
<div style=
"display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: 'Lato', sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
IAED ACE WEBSITE
</div>
<!--BEGIN OUTTER CONTAINTER-->
<table bgcolor="#EFEFEF" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#efefef;" width="100%">
<tr>
<td>
<!--BEGIN NAV-->
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding=
"0" cellspacing="0" style=
"background-color:#ffffff; width:700; margin:0 auto; border:thin solid #E8E8E8; color:#2a8acc;"
width="700">
<tr>
<td colspan="5" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td width="2%"> </td>
<td width="35%">
<a href="http://www.emergencydispatch.org/" style=
"color:#2a8acc; text-decoration:underline;" target=
"_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/iaed-logo-200w.png"></a>
</td>
<td align="left" valign="bottom" width="23%">
<span style=
"font-family: 'Lato', sans-serif; color:#2a8acc; text-align:left; font-size:18px;">
<a href="http://www.emergencydispatch.org/" style=
"color:#2a8acc; text-decoration:underline;" target=
"_blank">ABOUT IAED</a></span>
</td>
<td valign="bottom" width="20%"><span style=
"font-family: 'Lato', sans-serif; color:#2a8acc; text-align:left; font-size:18px;">
<a href="https://accreditation.emergencydispatch.org/"
style="color:#2a8acc; text-decoration:underline;"
target="_blank">WHY ACE</a></span>
</td>
<td valign="bottom" width="30%">
<!-- SOCIAL MEDIA -->
<table>
<tr>
<td width="30px">
<a href=
"https://www.facebook.com/InternationalAcademiesofEmergencyDispatch"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/facebook-logo-round.png"></a>
</td>
<td width="30px">
<a href="https://twitter.com/TheIAED"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/Twitter-round-color.png"></a>
</td>
<td width="30px">
<a href=
"https://www.linkedin.com/company/international-academies-of-emergency-dispatch"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/linkedin-round.png"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5" style="line-height:15px; height:15px;">
</td>
</tr>
</table>
<!--END NAV-->
<!--BEGIN BANNER -->
<table align="center" border="0" cellpadding="0" cellspacing=
"0" style="background-color:#ffffff; width:700; margin:0 auto;"
width="700px">
<tr>
<td>
<a href=
"https://accreditation.emergencydispatch.org/"
style="border:none;" target="_blank"><img class=
"mobile" src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/banner-iaed.png"></a>
</td>
</tr>
</table>
<!--END BANNER -->
<!-- BEGIN CONTENT -->
<table bgcolor="#FFFFFF" border="0" cellpadding="0"
cellspacing="0" style=
"background-color:#ffffff; width:700; margin:0 auto; border-bottom:thin solid #E8E8E8;"
width="700px">
<tr>
<td colspan="2" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" colspan="3"><span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:24px; font-weight:800;">
FEATURES</span>
</td>
</tr>
<tr>
<td colspan="3" style=
"line-height:15px; height:15px; border-bottom:thin solid #E8E8E8;">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/user-friendly.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
User-friendly</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>Simple-to-use instructions for providing
information and uploading documents help you
complete the 20 Points requirements</li>
<li>Demo videos help guide you through various
facets of the application process</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/cloud-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Upload everything—no more binders!</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>Our easy and convenient upload process means
you can electronically upload required application
documents to the IAED’s secure servers 24/7</li>
<li>No more shipping heavy binders</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/progress-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Progress bars</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>You can track your ACE application progress for
each of the 20 Points achieving also your overall
progress and deadlines toward ACE</li>
<li>Uploading documents is made easy with a
progress bar that lets you know when your
upload is complete</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/sync-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Sync your information</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>The online ACE application system automatically
synchronizes 20 Points application tasks completed
during your communication center’s implementation
process</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/credit-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Re-accreditation ready</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>You can refer to online documents previously
submitted by your agency for ACE or Re-ACE
requirements</li>
<li>Re-accreditation is a snap with the online
ACE application process</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF OUTTER CONTAINTER -->
</body></html>
Have you tried using adding align="center" to the "outer container" <table /> and header <div />?
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;}
}
I have two side by side table cells which stack when triggered by a media query for a HTML newsletter. I want the headlines "Be Ready" and "Stay Organized" to left align when the responsive code fires but the "margin: 0px auto" causes all of the content to center. Is there a way to get these to stay left aligned? If I move them out of the table data cell from the rest of the content, everything messes up.
The "Stay Organized" and "Be Ready" headlines are centered when the code is responsive. I need them left aligned instead.
This is what it's supposed to look like on mobile: http://imgur.com/vT3XhJ6
Any help is appreciated.
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta 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">
table td {border-collapse:collapse;}
table[class=tblPreHeaderLinks] {
width: 100% !important;
height: 25px !important;
clear: both !important;
float: none !important;
}
.appleLinks2 a {
color:#333333 !important;
text-decoration: none !important;
}
/* CLIENT-SPECIFIC STYLES */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .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 */
body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
/* iOS BLUE LINKS */
.appleBody a {color:#68440a; text-decoration: none;}
.appleFooter a {color:#999999; text-decoration: none;}
/* MOBILE STYLES */
#media screen and (max-width: 525px) {
body[yahoo] .block_td {display: block;}
.appleLinks2 a {
color:#545861 !important;
text-decoration: none !important;
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
div[class="mobilecontent"]{
display: block !important;
max-height: none !important;
}
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"]{
width:100% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"]{
display:none;}
img[class="mobile-hide"]{
display: none !important;
}
img[class="img-max"]{
max-width: 100% !important;
width: 100% !important;
height:auto !important;
}
a.learnMore {
display: block;
text-align: center;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="section-padding"]{
padding: 10px 15px 5px 15px !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"]{
width:100%!important;
}
td[class="weatherTEXT"]{
font-size: 23px !important;
line-height: 27px !important;
}
td[class="weatherTEXT2"]{
font-size: 17px !important;
line-height: 21px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin: 0; padding: 0;" bgcolor="#f6f4f5">
<style type="text/css">
body { width: 100% !important; }
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper" style="border:1px solid #e2e0e0;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5">
<tr>
<td align="center">
<!--BODY-->
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#f6f4f5" align="center">
<tbody><tr>
<td width="640" align="center" bgcolor="#ffffff" class="section-padding" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td bgcolor="#ffffff" align="center" style="padding: 5px 0px 5px 0px;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="640" class="responsive-table" align="center">
<tbody>
<tr><!--MOVABLE INK-->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="640" class="wrapper" bgcolor="#ffffff" align="center">
<tbody><tr>
<td style="padding: 15px 15px 5px 15px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="290" class="block_td" style="margin:0px auto;">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td align="left" style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Be Ready.</b>
</td>
</tr>
<td rowspan="3" valign="top" width="57" style="padding-right:10px;;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Phone-35x73.jpg" width="35" height="73" alt="House getting hit by a fallen tree" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Download our app:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td style="valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Take pictures of damage</td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Submit your claim</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding-top:2px;padding-bottom:35px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" alt="House getting hit by a fallen tree">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-right:35px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<img src="http://www.movable-ink-7850.com/p/rp/aa8600496aa4ae32.png?MM_webID=%%WebID%%" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="290" class="block_td" style="margin:auto;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;padding:0px 0px 25px 0px;" colspan="2">
<b>Stay Organized.</b>
</td>
</tr>
<tr>
<td rowspan="3" valign="top" width="60" style="padding-right:10px;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Icon-Devices-50x50.jpg" alt="" border="0">
</td>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="padding: -5px 0px 0px 0px;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:17px; padding-left:0px;">
<b>Visit eService today:</b>
</td>
</tr>
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;"><span class="appleLinks2">24/7 access</span></td>
</tr>
<tr>
<td valign="top">•</td>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:17px;">Manage your policy online</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:2px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="mobile-hide">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-70x19.jpg">
</td>
</tr>
<tr>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding-top: 30px; padding-right:40px;">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="center">
<a href="https://www.libertymutual.com/home-insurance/home-coverages-and-benefits/home-insurance-benefits/property-replacement-service?MM_webID=%%WebID%%"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Sign-In-139x38.jpg" width="139" height="38" border="0" alt="House getting hit by a fallen tree">
</div>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 15px 15px 20px 15px;" class="tdLine">
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="tblLine">
<tr>
<td style="line-height:1px; font-size:1px; background-color:#f6f4f5" class="tdLineActual"> </td>
</tr>
</table> <!-- tblLine -->
</td> <!-- tdLine -->
</tr>
</tbody></table>
</td>
</tr><!--END OF MOVABLE INK-->
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><!--END OF BODY-->
</td>
</tr>
</table>
</td>
</tr>
</table><!--END OF CONTAINER-->
</body>
</html>
However i dont recommend to use nested tables but for your structure added one more table for desired results: demo
<table width="80%" border="0" align="center" cellspacing="0" cellpadding="0">
I'm designing an email campaign template for a client and running into an issue. Trying to set my mobile styles to font-size:100% important!; but there seems to be a sizing issue here. The only things affected are #requiredFooterText td, leadline td, #full td, and #paragraphText. It simply doesn't resize for mobile and I need it to 14px. Picture 1 is what I have and Picture 2 is what I want.
Picture 1 -
Picture 2 -
I've tried to force the the font-size out of percentages as well to 24 px instead of 14px. However, it cuts out mobile hero and footer image in the process.
Hopefully I've explained myself well enough. Code is below:
<!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></title>
<style data="noinline">
.appleLink a,
.appleLink {
color:#777777 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#777777 !important;
text-decoration:none !important;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.aBn {
border-bottom: 0;
}
div #mainWrapper {width:100% !important;
table-layout:fixed !important;
}
body {
margin:0; !important
padding:0; !important
}
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px) {
body[yahoo=yes] {
margin: 0 !important;
padding: 0 !important;
}
table[class=mobileHide],
td[class=mobileHide],
span[class=mobileHide] {
display: none !important;
}
div[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[class=mobileShow] {
display: table !important;
max-height: none !important;
}
a[class=mobileShow] {
display: inline !important;
max-height: none !important;
}
img[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[id=mainWrapper],
table[id=main],
table[id=headerWrapper],
table[id=leadlineWrapper],
table[id=heroMobile],
table[id=messageWrapper],
table[id=footerMobile]
div[id=logo] {
margin:0 auto !important;
width:100% !important;
}
table[id=heroMobile] img
table[id=footerMobile] img {
display: block !important;
height:auto !important;
width:100% !important;
}
td[id=requiredFooterText]
td[id=leadline]
div[id=paragraphText] {
font-size:100% !important;
}
td[id=full] {
display:block;
width:100%;
font-size:100% !important;
}
img[class=icon] {
width:180px;
height:160px;
margin-bottom:20px;
}
}
/* end MOBILE STYLES*/
</style>
<style>
/* DESKTOP STYLES */
.appleLink a,
.appleLink {
color:#555555 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#555555 !important;
text-decoration:none !important;
}
.mobileShow,
.mobileShow img {
display: none !important;
max-height: 0;
}
img {
display:block;
border:0;
}
p {
margin:0;
padding:0;
display:inline;
}
table {
margin: 0 auto;
}
table td {
border-collapse:collapse;
}
#paragraphText {
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#mainWrapper {
background: #dadada;
}
#main {
background: #ffffff;
}
#leadlineWrapper {
background: #333333;
}
#leadline {
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.25;
padding-bottom: 14px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
#messageBody {
padding:20px;
}
#messageBody a {
color: #d46128;
}
#bulletlist td {
vertical-align:top;
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#logo {
background-color:#333333;
margin: 0 auto;
width:600px;
padding-top:20px;
padding-bottom:20px;
}
#requiredFooterText {
color: #555555;
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-top: 30px;
text-align: center;
margin:0;
}
/* end DESKTOP STYLES*/
</style>
</head>
<body yahoo="yes" style="-webkit-text-size-adjust:none; margin: 0; padding:0;" bgcolor="#dadada">
<table id="mainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table id="headerWrapper" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table id="leadlineWrapper" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="ec_item" id="leadline">Get a premier education on Florida's Gulf Coast.</td>
</tr>
</table><!-- /#leadlineWrapper -->
</td>
</tr>
</table><!-- /#headerWrapper -->
<table id="main" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td class="ec_item" id="heroWrapper">
<table class="mobileHide" id="heroDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="419" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#heroDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="heroMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="226" border="0" style="color: #333333; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table><!-- /#heroMobile -->
</div>
</td>
</tr><!-- /hero -->
<tr>
<td id="messageContainer">
<table id="messageWrapper" width="590" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="text-transform: none;" id="messageBody">
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
{First_name},<br /><br />
When you step onto the <strong>Blank</strong> campus, you know you've arrived somewhere special. In fact, we're one of only 40 schools featured in the book <em>Colleges That Change Lives</em>.
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
</div>
<table dir="rtl" id="bulletlist" width="100%">
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>188 acres of waterfront campus</strong> give you unlimited access to the living laboratory of the Gulf of Mexico. We offer an exhilarating academic experience and constantly strive toward inspiring you to THINK<strong>OUT</strong>SIDE.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet1 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>40 majors and 45 minors</strong> allow you to pursue a range of interests. You can even self-design your own major.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet2 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>96 percent of students</strong> receive some sort of financial aid, and individual merit scholarships of up to $19,000 are available.</p>
</td>
<td width="1%" dir="ltr" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet3 -->
<tr>
<td width="100%" height="15" class="ec_item"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>Autumn Term</strong> is an immersive three-week experience led by an expert faculty mentor. Opening with the Ceremony of Lights, your first academic course is a special opportunity to transition to college-level learning while becoming a strong member of the community.</p>
</td>
<td width="1%" id="full" class="ec_item"><img src="" /></td>
<td width="1%" dir="ltr" class="ec_item" id="full">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet4 -->
</table>
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
<strong><u>Confirm your information</u></strong> to find out more ways encourages you to THINK<strong>OUT</strong>SIDE.
</div>
<div width="100%" height="15"><img src="" /></div>
</td><!-- /#messageBody -->
</tr>
</table><!-- /#messageWrapper -->
</td>
</tr>
<tr>
<td class="ec_item" id="footerContainer">
<table class="mobileHide" id="footerDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="155" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="footerMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="144" border="0" style="color: #9c3022; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerMobile -->
</div>
</td>
</tr>
<tr>
<td>
<div class="ec_item" id="logo" align="center">
<a href="">
<img height="49" width="160" style="margin:20px;" src="" style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;" alt="" /></a>
</div>
</td>
</tr>
</tbody>
</table><!-- /#main -->
<table id="requiredFooter" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="requiredFooterText">
This message was sent to <span style="color:#333333;">{EMAIL}</span> by <span style="color:#333333;">{FROM_EMAIL}</span>.<br /><br />
=
We received your contact information from {CONTACT_SOURCE}.<br /><span style="color:#333333;">Unsubscribe</span> from future email communications from Office of Admission.<br /><br /><br />
</td>
</tr>
</table><!-- /#requiredFooter -->
</td>
</tr>
</table><!-- /#mainWrapper -->
</body>
</html>
What about css media queries?
As a reference https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries and
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can not have 2 style in your header.
When it is to an email template, I would advise you to make everything inline style and the things that need to be different on the phone must be in header #media, with a !important on. as shown in the example.
Hope it helps
<!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></title>
<style>
#media only screen and (max-width: 480px) {
.paragraphText p {
font-size: 24px !important;
}
}
</style>
</head>
<body>
<div class="paragraphText">
<p style="color: #000000; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5;"> Confirm your information</p>
</div>
</body>
</html>