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.
Related
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 am working on an email template and am having three issues I cannot seem to figure out.
Image at top is being stretched.
Email is not responsive in Gmail App (landscape)
Left aligned text is correct in larger screens, but off centered in mobile screens. (Need to disable added margin in mobile screens)
Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
#media screen and (max-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f1f1f1;">
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div style="max-width: 680px; margin: auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td bgcolor="#222944" style="padding: 20px 0; text-align: center">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/RevolutionPrep_Logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #222944; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" style="padding: 40px 40px 0px 40px; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<h1 style="color: black; font-size: 24px; font-weight: normal;letter-spacing: 1px; padding-bottom: 0px; line-height: 30px;">Thank you <nobr>for getting in</nobr> touch!</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 20px;">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png" width="170" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 170px; height: auto; background: #fff;">
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" bgcolor="#ffffff" style="padding: 0px 40px 40px 40px; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<p>
We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number listed below, to talk to one of our staff members. In the meantime, you can check the FAQ section, look over advice and planning that we offer for free or browse through our latest blog posts click here. Otherwise, we will reply by email shortly.
</p>
<p>
Talk to you soon,
<br>
Revolution Prep Team
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#cfd4d8" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="padding-left:-30px;" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Revolution Prep
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
1337 3<sup>rd</sup> Street Promenade, <nobr>2<sup>nd</sup> Floor</nobr>
<br>
Santa Monica, CA 90401<br>
revolutionprep.com
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Need help?
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
Call us at <strong>(877) 738-7737</strong> or
<br>
Email us with any questions.
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px; padding-bottom: 8px;" class="center-on-narrow">
Follow us
</div>
<img src="http://assets.getvero.com/emails/templates/welcome/tw.png" style="padding-right: 5px" alt="Twitter" height="27px" width="26px">
<img src="http://assets.getvero.com/emails/templates/welcome/fb.png" alt="Facebook" height="27px" width="26px">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;">About Revolution</div>
<div style="font-size:13px; margin-bottom:20px;">How We Work</div>
<div style="font-size:13px; margin-bottom:20px;">Subjects we Tutor</div>
<div style="font-size:13px; margin-bottom:20px;">Success Stories</div>
<div style="font-size:13px; margin-bottom:20px;">Advice and Planning</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#fd8204">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-size: 12px; font-family: Verdana, Arial, sans-serif; letter-spacing: 1px; line-height: 20px;text-align: center; color: white;">
<nobr>BETTER GRADES.</nobr> <nobr>HIGHER TEST SCORES.</nobr> <nobr>GREATER CONFIDENCE.</nobr>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : BEGIN -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
<a style="color:#888888; text-decoration:underline;" href="{{url.unsubscribe_link}}">Click here to unsubscribe
</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
Mobile left-align bug -
Outlook left-align bug -
Mobile Gmail App header stretched and white space to right (non-responsive) -
For the left-align bug, I think you do it little bit wrong. Try this.
<td style="padding: 20px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;">About Revolution</div>
<div style="font-size:13px; margin-bottom:20px;">How We Work</div>
<div style="font-size:13px; margin-bottom:20px;">Subjects we Tutor</div>
<div style="font-size:13px; margin-bottom:20px;">Success Stories</div>
<div style="font-size:13px; margin-bottom:20px;">Advice and Planning</div>
</td>
</tr>
</table>
</td>
I just modify the padding. Hope it will help. I can't help you for your first issue, because I had checked and run your code at jsfiddle, nothing wrong with the image issue that you said :/
For the image stretching part, have you tried removing the font-size and line-height on the image? Since it is an image it really doesn't need it. Gmail App adds weird font-sizes sometimes so that may be the cause.
I agree with the other answer above on the misaligned mobile stuff. You have different padding on each column. See column one you have padding: 25px 10px 0px 30px;
For the top image, you need to add 'height' (height=170, style=height:170px) like this;
<img src='http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png' width='170' height='170' border='0' alt='' class='center-on-narrow' style='width: 100%; max-width: 170px; height: auto; max-height:170px; background: #fff;'>
I've tested all browser in Litmus, they are all good.
For Gmail App(Android), you need to add 'hack' code below body tag. And you need to add style for 'gmailfix' class like this in the style tag. After adding this code, Grail app renders like desktop version.
...
<style>
.gmailfix {display:none;display:none!important;}
</style>
...
...
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<!-- below is hack for gmail app -->
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
</div>
...
...
Here is all code that I have fixed. You can copy this code and test in Litmus. I have tested in all email client and eveything looks good.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
.gmailfix {display:none;display:none!important;}
/* Media Queries */
#media screen and (max-device-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
.mcenter, .mcenter * {text-align: center !important;}
}
</style>
</head>
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
</div>
<center style="width: 100%; background: #f1f1f1;">
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div style="max-width: 680px; margin: auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td bgcolor="#222944" style="padding: 20px 0; text-align: center">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/RevolutionPrep_Logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #222944; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" style="padding: 40px 40px 0px 40px; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<h1 style="color: black; font-size: 24px; font-weight: normal;letter-spacing: 1px; padding-bottom: 0px; line-height: 30px;">Thank you <nobr>for getting in</nobr> touch!</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 20px;">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png" width="170" height="170" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 170px; height: auto; max-height:170px; background: #fff;">
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" bgcolor="#ffffff" style="padding: 0px 40px 40px 40px; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<p>
We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number listed below, to talk to one of our staff members. In the meantime, you can check the FAQ section, look over advice and planning that we offer for free or browse through our latest blog posts click here. Otherwise, we will reply by email shortly.
</p>
<p>
Talk to you soon,
<br>
Revolution Prep Team
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#cfd4d8" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="padding-left:-30px;" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0;width:100%;max-width:300px;display:inline-block;vertical-align:top;">
<tr>
<td align="left" style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Revolution Prep
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
1337 3<sup>rd</sup> Street Promenade, <nobr>2<sup>nd</sup> Floor</nobr>
<br>
Santa Monica, CA 90401<br>
revolutionprep.com
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Need help?
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
Call us at <strong>(877) 738-7737</strong> or
<br>
Email us with any questions.
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px; padding-bottom: 8px;" class="center-on-narrow">
Follow us
</div>
<img src="http://assets.getvero.com/emails/templates/welcome/tw.png" style="padding-right: 5px" alt="Twitter" height="27px" width="26px">
<img src="http://assets.getvero.com/emails/templates/welcome/fb.png" alt="Facebook" height="27px" width="26px">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0;width:100%;max-width:190px;display:inline-block;vertical-align:top;">
<tr>
<td align="left" style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;">About Revolution</div>
<div style="font-size:13px; margin-bottom:20px;">How We Work</div>
<div style="font-size:13px; margin-bottom:20px;">Subjects we Tutor</div>
<div style="font-size:13px; margin-bottom:20px;">Success Stories</div>
<div style="font-size:13px; margin-bottom:20px;">Advice and Planning</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#fd8204">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-size: 12px; font-family: Verdana, Arial, sans-serif; letter-spacing: 1px; line-height: 20px;text-align: center; color: white;">
<nobr>BETTER GRADES.</nobr> <nobr>HIGHER TEST SCORES.</nobr> <nobr>GREATER CONFIDENCE.</nobr>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : BEGIN -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
<a style="color:#888888; text-decoration:underline;" href="{{url.unsubscribe_link}}">Click here to unsubscribe
</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
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>