Hello every one I want to align my social icon images for yahoo mail I try many thing but result is same I also try table-layout:fixed; style but my images still showing on left align any one help me out from this problem my code snippet is below
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>My Promo | Email</title>
<style type="text/css">
body {background-color:#fcfcfc;}
/* Client-specific Styles */
div, p, a, li, td { -webkit-text-size-adjust:none; }
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
html{width: 100%; }
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; }
a {color: #33b9ff;text-decoration: none;text-decoration:none!important;}
.punch{font-size:22px;color:#32fac9;line-height: 1;}
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
/*IPAD STYLES*/
#media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #33b9ff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #33b9ff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
img[class=banner] {width: 440px!important;height:220px!important;}
img[class=col2img] {width: 440px!important;height:220px!important;}
.punch{font-size:22px;color:#32fac9;line-height: 1;}
}
/*IPHONE STYLES*/
#media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #33b9ff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #33b9ff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 100%!important;text-align:center!important;}
table[class=devicewidthinner] {width: 100%!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:94px!important;}
img[class=col2img] {width: 280px!important;height:100px!important;margin-left:0px!important;margin-right:0px!important;}
.punch{font-size:19px;color:#32fac9;line-height: 1;}
}
</style>
</head>
<body>
<!-- Start of preheader -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader" >
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" align="left" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #000" st-content="preheader">
Can't see this Email? View it in your Browser
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of preheader -->
<!-- Start of header -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="postfooter" >
<tbody>
<tr>
<td>
<table width="600" bgcolor="#242740" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="500" height="50" align="center" style="font-size:19px;color:#32fac9;line-height: 1;">
My Punch Line
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Header -->
<!-- Start of seperator -->
<!-- End of seperator -->
<!-- Start of main-banner -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="banner">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" bgcolor="242740" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
<tbody>
<tr>
<!-- start of image -->
<td align="center" st-image="banner-image">
<div class="imgpop">
<a target="_blank" href="#"><img width="517" border="0" height="159" alt="" border="0" style="display:block; border:none; outline:none; text-decoration:none;" src="img/banner.png" class="banner"></a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- end of image -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of main-banner -->
<!-- Start of seperator -->
<!-- End of seperator -->
<!-- Start of Left Image -->
<!-- End of Left Image -->
<!-- Start of seperator -->
<!-- End of seperator -->
<!-- start of Full text -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="full-text">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#fff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<!-- Title -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 20px; color: #282828; text-align:center; line-height: 24px;">
Hello (Mr Name)
</td>
</tr>
<!-- End of Title -->
<!-- spacing -->
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- End of spacing -->
<!-- content -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #636363; line-height: 24px; text-align: left;padding:0 10px;">
Email Body
</td>
</tr>
<!-- End of content -->
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Full Text -->
<!-- Start of seperator -->
<!-- End of seperator -->
<!-- Start of footer -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="footer">
<tbody>
<tr>
<td>
<table width="600" bgcolor="#eacb3c" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#eee" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<!-- Social icons -->
<table width="150" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td width="43" height="43" align="center">
<div class="imgpop">
<a target="_blank" href="#">
<img src="img/facebook.png" alt="facebook" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">
</a>
</div>
</td>
<td align="left" width="20" style="font-size:1px; line-height:1px;"> </td>
<td width="43" height="43" align="center">
<div class="imgpop">
<a target="_blank" href="#">
<img src="img/twitter.png" alt="twitter" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">
</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- end of Social icons -->
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of footer -->
<!-- Start of Postfooter -->
<table width="100%" bgcolor="#fcfcfc" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="postfooter" >
<tbody>
<tr>
<td>
<table width="600" bgcolor="#242740" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<tr>
<td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="preheader">
<span style="font-size:17px;color:#fff;display:inline-block">
Read about our
<a target="_blank" style="color:#d73914;text-decoration:none" href="http://some.com/my-terms.html">policy.</a>
</span>
</td>
</tr>
<tr>
<td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 13px;color: #282828" st-content="preheader">
<span style="font-size:12px;color:#fff;display:inline-block"> © 2015 all rights reserved.
<br>
www.some.com
</span>
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of postfooter -->
</body>
</html>
Social icons looks great in normal html, gmail, outlook but not in yahoo my required email is yahoo in yahoo social icons view at left align not in current align i.e centere.
thanks in advance
Related
I have created a signature template using basic html tables and inline styles. This template displays perfectly on pretty much every email client including Android. The massive problem is that most of our partners/members/staff use iPhones! (shocking I know!) would anyone know how to stop the iPhone from displaying my tables like this.
This is my code
<tr>
<td>
<img src="https://asite.where.img.comes/dnut.png" />
</td>
<td style="padding:5px">
<img src="https://asite.where.img.comes/AOPwording.png" />
<table>
<tr>
<td style="font-family:arial; font-size:10pt; font-weight:bold; color:#1294c2;">
Daryl Liney
</td>
</tr>
<tr>
<td style="font-family:arial; font-size:8pt; color:#4a4949;">
IT Support
</td>
</tr>
</table>
</td>
<td>
<table style="padding-left:5px;" style="border:thin black solid">
<tr>
<td>
<img src="https://asite.where.img.comes/Location.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
2 Woodbridge Street, London, EC1R 0DG
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Phone.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
020 7549 ****
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Phone.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
020 7549 ****
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Print.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
020 7251 ****
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Message.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
**********#aop.org.uk
</td>
</tr>
<tr>
<td>
<img src="https://asite.where.img.comes/Globe.png" />
</td>
<td style="font-family:arial; font-size:10px; color:#4a4949;">
www.aop.org.uk
</td>
</tr>
</table>
</td>
</tr>
This is how the iphone displays the image
Click
This is how it should look
Click
Please try to follow best practices while designing HTML templates as there are many blogs available to guide which things to do or don't do while designing templates.
Error in your template is:
If your text is in a container with a width set to less than that of your text, it might wrap poorly on this device. Here I am putting a sample template so that you can have basic idea how to create templates.
Here is a 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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>Simples-Minimalistic Responsive Template</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; }
a {color: #0a8cce;text-decoration: none;text-decoration:none!important;}
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
/*IPAD STYLES*/
#media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
img[class=banner] {width: 440px!important;height:220px!important;}
img[class=colimg2] {width: 440px!important;height:220px!important;}
}
/*IPHONE STYLES*/
#media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 360px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 360px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=colimg2] {width: 280px!important;height:140px!important;}
td[class=mobile-hide]{display:none!important;}
td[class="padding-bottom25"]{padding-bottom:25px!important;}
}
#media only screen and (max-width: 380px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 325px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 325px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=colimg2] {width: 280px!important;height:140px!important;}
td[class=mobile-hide]{display:none!important;}
td[class="padding-bottom25"]{padding-bottom:25px!important;}
}
#media only screen and (max-width: 350px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 280px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 280px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:140px!important;}
img[class=colimg2] {width: 280px!important;height:140px!important;}
td[class=mobile-hide]{display:none!important;}
td[class="padding-bottom25"]{padding-bottom:25px!important;}
}
</style>
</head>
<body>
<!-- Start of preheader -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader" >
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
<tr>
<td>
<table width="" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Helvetica, arial, sans-serif; font-size: 12px;color: #808080" st-content="viewonline" class="mobile-hide">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of preheader -->
<!-- Start of header -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="header">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<!-- logo -->
<table width="140" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td width="169" height="45" align="left">
<div class="imgpop">
<a target="_blank" href="#">
heading
</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- end of logo -->
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="2columns">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td>
<!-- start of left column -->
<table width="290" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Spacing -->
<tr>
<td>
<!-- start of text content table -->
<table width="290" align="left" border="0" cellpadding="10" cellspacing="0" class="devicewidth">
<tbody>
<!-- image -->
<tr>
<td width="100%" height="1"></td>
</tr>
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 36px; color: #000; text-align:center; line-height: 36px;" st-title="fulltext-title">
Your Heading
</td>
</tr>
<!-- Content -->
<!-- end of Content -->
<!-- end of content -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- end of left column -->
<!-- start of right column -->
<table width="290" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- Spacing -->
<!-- Spacing -->
<tr>
<td>
<!-- start of text content table -->
<table width="290" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<!-- image -->
<tr>
<td width="290" height="160" align="center" class="devicewidth">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT1UcNyUp_I2JbSRX5G0S-UNdEk3Jv2cwUvsEZAWfs0sd_xKbM7K7A7UVSe" width="200" height="200"alt="" border="0" style="display:block; border:none; outline:none; text-decoration:none;" class="colimg2">
</td>
</tr>
<!-- end of Content -->
<!-- end of content -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- end of right column -->
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end of 2 columns -->
<!-- Start Full Text -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="full-text">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<!-- Title -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #808080; font-weight: bold; text-align:left; line-height: 30px;" st-content="fulltext-content">
<span id="userNameSpan">Hello, Customer</span>
</td>
</tr>
<!-- End of Title -->
<!-- spacing -->
<tr>
<td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- End of spacing -->
<!-- content -->
<tr>
<td style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #808080; text-align:left; line-height: 18px;" st-content="fulltext-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fringilla tellus quis lacus tempus malesuada. Mauris consectetur bibendum tellus sed viverra. Aenean scelerisque lacus quis odio interdum, nec hendrerit nibh dapibus. Morbi leo ex, feugiat at elementum eget, ultricies sit amet nibh. Vivamus tristique feugiat condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</td>
</tr>
<!-- End of content -->
</tbody>
</table>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td height="30" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="seperator">
<tbody>
<tr>
<td>
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
<tbody>
<tr>
<td align="center" height="30" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td width="550" align="center" height="1" bgcolor="#d1d1d1" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td align="center" height="30" style="font-size:1px; line-height:1px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You need to write media queries also to support your template in mobile devies.
Happy Coding!
I will give you the Objective C iOS coding.It will work for you.
-(void)viewDidLoad
{
NSString *htmlString = [NSString stringWithFormat:#"%#",htmlData]; //htmlData is you are getting html response to this.It may be string or array means you are getting html response to String htmlData or array htmlData.
[webView loadHTMLString:htmlString baseURL:nil];
}
//WebView Delegate Method
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:#"document.height"] floatValue];
CGRect frame = webView.frame;
frame.size.height = height;
webview.frame = frame;
}
In above viewDidLoad method you load the html data to webView.So it automatically brings to your expected form.
In above WebView Delegate Method, you can set the html data content height to webView height.
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 an email that works fine in every email client except Outlook 2013. In Outlook 2013 the email stretches full width when it should only be 600px wide.
I've tried searching everywhere for a fix but with no luck!
Here is the 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>Scientific Data</title>
<style type="text/css">
body {width:100% !important;}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
body { margin: 0; padding: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#666666;}
table td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
p { margin: 0; padding: 0; margin-bottom: 0; }
ul { margin: 0; }
a, img {border:none;}
.symbolfix img {width:9px !important;height:9px !important;}
a {color:#363636;text-decoration:none;} a {-webkit-tap-highlight-color: rgba(0,0,0,0);color:#006699; !important}
.appleLinks a {color:#666666; text-decoration:none;} /* Stop iOS making times and dates blue */
.ExternalClass * { line-height: 100%; }
#media (max-width:480px) {
table[class="wrapper"], td[class="wrapper"] {width:320px !important;}
table[id="header"]{width:100% !important;}
img[class="banner"], img[class="headercell"]{width:100% !important; height:auto !important;}
img[id="img-280"]{width:280px !important; height:auto !important; padding:0px !important;}
table[id="col-left"],table[id="col-center"], table[id="col-right"]{width:100% !important; height:auto !important; }
table[id="col-one"],table[id="col-two"],table[id="col-full"]{width:100% !important; height:auto !important;}
table[id="col-half"]{width:80% !important;}
td[class="hide"]{display:none !important;}
img[id="small-img"]{width:100% !important; height:auto !important;}
td[id="social-media"]{width:100% !important;padding:30px 0px 20px 0px !important;}
table[id="prod-icons"]{width:25% !important;}
td[id="gutter"]{width:25px !important;}
td[id="gutter-small"]{width:10px !important;}
td[id="break-top"]{border-top:1px solid #cccccc;}
img[id="cont-title"]{width:auto !important; height:50px !important;}
}
</style>
</head>
<body bgcolor="#e7e7e7">
<!-- 100% table -->
<table width="100%" bgcolor="#e7e7e7" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" bgcolor="#e7e7e7" class="wrapper" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600" align="center" class="wrapper">
<br />
<!-- wrapper table -->
<table class="wrapper" width="600" bgcolor="#e7e7e7" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td class="wrapper">
<table class="wrapper" width="600" bgcolor="#e7e7e7" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td align="center" valign="top" bgcolor="#cdcdcd"><!-- preheader table --> <!-- end of preheader table -->
</td>
</tr>
</table>
</td>
</tr>
<!-- header table -->
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" class="wrapper" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" bgcolor="#274a5c"><img class="headercell" src="http://fastart.nature.com/1989_2015/header.jpg" alt="Scientific Data" width="600" height="84" border="0" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:18px;line-height:22px;font-weight:bold;color:#b01b22;display:block;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" bgcolor="#ef763d" style="height:10px;font-size:10px;line-height:10px;">
</td>
</tr>
<!-- end of header table -->
<!--Title-->
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" align="left" valign="top" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 22px; line-height: 28px; color: #363636; padding:30px 20px 20px 20px;"><strong>Scientific Data</em> おすすめのコンテンツ – Epidemiology
</strong>
</td>
</tr>
<!-- end of Title -->
<!--main body-->
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" align="left" valign="top" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 18px; color: #363636; padding:0px 20px 30px 20px;">
<em>Scientific Data</em> は価値のある研究データセットを掲載するオープンアクセスジャーナルです。研究データの広範囲な再利用を促進するとともに、データを公開した研究者にクレジットを与えることを目指します。<em>Scientific Data </em>は科学のすべての領域を対象とし、データのサイズや、研究主体の規模（主要な研究コンソーシアム、研究室、個人単位）に関わらず、投稿を受け付けています。<br /><br />
<em>Scientific Data</em> で出版されるData Descriptors は、科学的なデータセットをくわしく記述する新しいタイプのコンテンツで、公開されたデータを読者が理解しやすく、再利用しやすい形で構成されています。<br /><br />
あなたのご関心分野で、最近特に注目されているData Descriptorを選んでご紹介します。是非ご閲覧ください。また、最新の研究成果をお届けする <em>Scientific Data</em> コンテンツアラートに是非ご登録ください。
</td>
</tr>
</table>
</td>
</tr>
<!-- end of body -->
<!--Button -->
<tr>
<td width="600" align="center" valign="top" bgcolor="#ffffff" style="font-size:0px; line-height:0px;">
<table bgcolor="#ef763d" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;line-height:20px;color:#ffffff;padding: 10px;"><strong><a href="http://www.nature.com/nams/svc/myaccount/save/alert?list_id=329&WT.mc_id=EMI_SCIDATA_1508_EpidemiologyJAPANESE&WT.i_dcsvid=%%LIST_ID%%-%%RECIPIENT_ID%%&WT.ec_id=MARKETING" target="_blank" style="color:#ffffff;text-decoration:none;"> Sign up for e-alerts
</a></strong>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of Button -->
<!-- Sub title -->
<tr>
<td width="600" align="center" class="wrapper">
<table width="600" class="wrapper" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:18px;color:#363636;padding:0px 20px 20px 20px;"> </td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:18px;color:#363636;padding:0px 20px 20px 20px;"><strong>編集部が選ぶ Data Descriptors:</strong>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of Sub title -->
<!-- Row 1 -->
<tr>
<td align="left" valign="top" width="600" class="wrapper">
<table width="600" class="wrapper" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="gutter" width="20" align="left" valign="top" bgcolor="#ffffff" style="font-size:0px; line-height:0px;"> </td>
<td align="left" valign="top" bgcolor="#ffffff" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#666666;"><b>The global compendium of <em>Aedes aegypti</em> and <em>Ae. albopictus</em> occurrence</b><br /><br /><b>A review of epidemiological parameters from Ebola outbreaks to inform early public health decision-making</b><br /><br /><b>A global compendium of human Crimean-Congo haemorrhagic fever virus occurrence</b>
</td>
<td id="gutter" width="20" align="left" valign="top" bgcolor="#ffffff" style="font-size:0px; line-height:0px;">
</td>
</tr>
<tr>
<td id="bottom-height" height="30" colspan="3" align="left" valign="top" bgcolor="#ffffff" style="font-size:0px; line-height:0px;">
</td>
</tr>
</table>
</td>
</tr>
<!-- End of Row 1 -->
<!-- NPG colour bar-->
<tr>
<td width="600" align="right" valign="middle" bgcolor="#ffffff">
<table id="container" width="100%" align="right" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="right" valign="middle" bgcolor="#ffffff" style="padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px">
<img src="http://fastart.nature.com/srep/npg_logo.gif" alt="Nature Publishing Group" width="184" height="35" border="0" align="right" style="display:block;" />
</td>
</tr>
</table>
</td>
</tr>
<!-- end of NPG colour bar -->
<!-- footer-->
<tr>
<td width="600" class="wrapper" bgcolor="#e7e7e7">
<table class="container" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#e7e7e7" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:9px;line-height:13px;color:#666666;">
<tr>
<td width="100%" align="left" bgcolor="#e7e7e7" style="padding:25px;">As a registered user of Nature Publishing Group's Web sites, our database indicates that you have opted-in to receive product information and special offers. If you no longer wish to receive these e-mails or to discontinue all e-mail services from Nature Publishing Group please update your online account. <span style="color:#666666;">Modify My Account</span> (Log in to be recognised as a <span style="color:#666666;">Nature.com</span> registrant). <br />
<br />
For further information on <span style="color:#666666;">technical assistance</span> | <span style="color:#666666;">print subscriptions</span> | <a style="color:#666666;" href="mailto:feedback#nature.com" target="_blank"><span style="color:#666666;">other enquiries</span></a>. <br />
<br />
Nature Publishing Group | Principal offices: <span style="color:#666666"><a href="http://www.nature.com/npg_/contact/offices.html?WT.mc_id=EMI_SCIDATA_1508_EpidemiologyJAPANESE&WT.i_dcsvid=%%LIST_ID%%-%%RECIPIENT_ID%%&WT.ec_id=MARKETING" style="text-decoration:none;color:#666666;" target="_blank">London | New York and Tokyo, and offices in cities worldwide including Basingstoke | Barcelona | Boston | Buenos Aires | Cairo | Delhi | Heidelberg | Madrid | Melbourne | Mexico City | Mumbai | Munich | Paris | San Francisco | Sao Paulo | Seoul | Shanghai and Washington DC. Macmillan Publishers Limited is a company incorporated in England & Wales under company number 785998 & whose registered office is located at Brunel Road, Houndmills, Basingstoke, Hampshire RG21 6XS. Nature Publishing Group | One New York Plaza, Suite 4500 | New York
| NY 10004-1562 | US </a></span><br />
<br />
<span class="symbolfix">©</span> 2015 Nature Publishing Group, a division of Macmillan Publishers Limited. All rights reserved.
</td>
</tr>
</table>
</td>
</tr>
<!-- end of footer -->
</table>
<!-- end of wrapper table -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end of 100% table -->
</body>
</html>
Please help!!
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 coding a responsive email, and I'm running onto some troubles with the behavior of some its tables. Please check the attached picture, for the desired effect.
https://dl.dropboxusercontent.com/u/58655025/mail_scenario.jpg
(left: "normal" behavior; right: responsive behavior, when the view width is <= 320px)
I'm not exactly sure of how many elements these blocks (both rectangular and the square ones; number of block elements and contents are dynamic) will have in total, so I want to keep the HTML as dynamic as possible. So, every time a new element is added to each block, it's placed at the right of the previous one and when they cannot fit on that line (due to email's max-width of 620px), I'd like for them to continue below.
And that's the part I'm not able to do. Instead of breaking below, the elements keep growing in the same line, ignoring the email's max-width property.
I'd like for the implementation to be table-based only, in order to guarantee the maximum email-client support as possible.
What can I do to achieve this? Any other suggestion?
Please, check this fiddle for a live example: http://jsfiddle.net/afe33fhv/
Or the HTML code, as required:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Title</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body {width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; color:#756d85; font-family:Helvetica, Arial, sans-serif;}
body.outlook img { width: auto !important; max-width: none !important;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
.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; }
a {color: #756d85;text-decoration: none;text-decoration:none!important;}
table[class=full] { width: 100%; clear:both; }
/*IPAD STYLES*/
#media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
table[class=devicewidth] {width:440px !important; text-align:center !important;}
table[class=devicewidthinner] {width:420px !important; text-align:center !important;}
table[class=devicewidthsocial] {width:200px! important; text-align:center !important;}
img[class=banner] {width:440px !important; height:220px !important;}
img[class=colimg2] {width:440px !important; height:220px !important;}
}
/*IPHONE STYLES*/
#media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #000;
pointer-events: none;
cursor: default;
}
table[class=devicewidth] {width:300px !important; text-align:center !important;}
table[class=devicewidthinner] {width:260px !important; text-align:center !important;}
table[class=devicewidthsocial] {width: 200px!important; text-align:center !important;}
img[class=banner] {width: 280px!important; height:140px!important;}
img[class=colimg2] {width: 280px!important; height:140px!important;}
td[class=mobile-hide]{display:none !important;}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<!-- | Horizontal blocks | -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2">
<tbody>
<tr>
<!-- Element 1 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#7c84ca">
<tbody>
<tr><td width="100%">1</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 2 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#bdaabf">
<tbody>
<tr><td width="100%">2</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 3 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d26ec1">
<tbody>
<tr><td width="100%">3</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
<!-- Element 4 -->
<td>
<table width="300" height="100" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr>
<td>
<table width="300" height="80" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#d85c79">
<tbody>
<tr><td width="100%">4</td></tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;"> </td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- | Square blocks | -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" bgcolor="#f2f2f2">
<tbody>
<tr>
<!-- Element 1 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8eb7c2">
<tbody>
<tr><td>1</td></tr>
</tbody>
</table>
</td>
<!-- Element 2 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#8ec296">
<tbody>
<tr><td>2</td></tr>
</tbody>
</table>
</td>
<!-- Element 3 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#636a34">
<tbody>
<tr><td>3</td></tr>
</tbody>
</table>
</td>
<!-- Element 4 -->
<td>
<table width="140" height="140" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#c17b01">
<tbody>
<tr><td>4</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
You probably want to scrap the tables. Set all the blocks to display: inline-block; and they will automatically wrap around to the next line if the parent container hasn't got enough width left.
By using media queries, you can make sure the boxes parent container can only take on certain widths, creating your desired effect.
Here is a jsfiddle demonstrating: http://jsfiddle.net/spkzj05b/2/
Here is a list of css features supported in popular email clients: https://www.campaignmonitor.com/css/
Here is a tool to test the rendering in different email clients: https://litmus.com/email-testing