I've been trying to hide a block element in outlook desktop and show another block element in outlook mobile but it doesn't work and I don't know why because I'm using the same method as I was using before but still doesn't work.
Can you please check my code and tell me if you have any suggestions? Thank you!
Please check the screenshot with the way it displays in outlook here
https://imgur.com/U6b2oSj
On mobile it hides the element, is just the desktop outlook that it doesn't
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<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="date=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap" rel="stylesheet">
<style type="text/css">
* {
mso-line-height-rule: exactly;
}
div,
p,
a,
li,
td,
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-family: 'Roboto Condensed', sans-serif;
}
table td {
border-collapse: collapse;
}
body,
p {
margin: 0;
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 110%
}
img {
-ms-interpolation-mode: bicubic;
display: block;
border: 0;
}
blockquote .orig,
.WordSection1 .orig {
display: none!important;
}
table th {
margin: 0!important;
padding: 0!important;
vertical-align: top;
font-weight: normal;
}
</style>
<style type="text/css">
#media screen {
a[href^="tel"],
a[href^="sms"],
.moblinks a {
color: inherit;
text-decoration: none!important;
}
}
a[x-apple-data-detectors] {
color: inherit!important;
text-decoration: none!important;
font-size: inherit!important;
font-family: inherit!important;
font-weight: inherit!important;
line-height: inherit!important;
}
div[style*="margin: 16px 0"] {
margin: 0!important;
}
</style>
<style type="text/css">
#media screen and (max-device-width:640px),
screen and (max-width:640px) {
.gapmob {
width: 100%!important;
float: left!important;
display: block!important;
padding-top: 10px!important;
}
.stack {
width: 100% !important;
float: left !important;
display: block !important;
align-content: center !important;
text-align: center !important;
}
.CTR {
align-content: center !important;
text-align: center !important;
width: 100% !important;
}
.colsplit {
width: 100%!important;
float: left!important;
display: block!important;
}
.wrapto320px {
width: 380px!important;
min-width: 380px!important;
max-width: 380px!important;
height: auto!important;
}
.wrapto320px .FontHeader {
font-size: 30px !important;
line-height: 1.2 !important;
}
.wrapto280px {
width: 280px!important;
min-width: 280px!important;
max-width: 280px!important;
height: auto!important;
}
.wrapto100pc {
width: 100%!important;
min-width: 100%!important;
max-width: 1000px!important;
height: auto!important;
}
.wrapto100pcmax {
width: auto!important;
height: auto!important;
max-width: 100%!important;
display: block!important;
}
.nomob {
display: none!important;
width: 0px!important;
height: 0px!important;
}
.textcenter {
text-align: center!important;
}
.textleft {
text-align: left!important;
}
.textright {
text-align: right!important;
}
.show {
display: block!important;
overflow: visible!important;
float: none!important;
width: 100%!important;
height: auto!important;
max-height: inherit!important;
}
.logo {
width: 120px!important;
height: auto!important;
}
.clearbg {
background-image: none!important;
}
.ptop10 {
padding-top: 10px!important;
}
.valignmobtop {
vertical-align: top!important;
}
.valignmobmiddle {
vertical-align: middle!important;
}
.valignmobbottom {
vertical-align: bottom!important;
}
.mobheightclear {
height: auto!important;
}
.mobheight100 {
height: 100px!important;
}
.mobheight150 {
height: 150px!important;
}
.mobheight200 {
height: 200px!important;
}
.mobheight250 {
height: 250px!important;
}
.mobheight300 {
height: 300px!important;
}
.mobheight350 {
height: 350px!important;
}
.mobheight400 {
height: 400px!important;
}
.mobheight450 {
height: 450px!important;
}
.mobheight500 {
height: 500px!important;
}
.mobheight550 {
height: 550px!important;
}
.mobheight600 {
height: 600px!important;
}
.mobheight650 {
height: 650px!important;
}
.mobheight700 {
height: 700px!important;
}
.mobheight750 {
height: 750px!important;
}
.mobheight800 {
height: 800px!important;
}
}
</style>
<!--[if (mso)|(mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if mso] >
<style type="text/css">
table, td, div, p {
font-family: arial, sans-serif !important;
line-height:normal;
}
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<o:CustomDocumentProperties>
<o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor msdt:dt="string">Ionut Mitu</o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor>
<o:Order msdt:dt="string">5825000.00000000</o:Order>
<o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author msdt:dt="string">Ionut Mitu</o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author>
<o:ContentTypeId msdt:dt="string">0x0101003BA064F954674D4B968EEE2A83BA3752</o:ContentTypeId>
</o:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body class="body" leftmargin="0" topmargin="0" rightmargin="0" bgcolor="#ffffff" style="margin:0 !important; padding:0 !important; width:100% !important;"><img src="https://s4cloudae36f1aac.hana.ondemand.com:443/data-buffer/sap/public/cuan/link/100/53453E04AD2A2EA685C0B93208E78873279FF43A/pixel.gif?_L54AD1F204_=c2NlbmFyaW89TUxPUEVOJnRlbmFudD1teTMwMzczNi5zNGhhbmEub25kZW1hbmQuY29t" width="1" height="1" border="0"
alt="">
<!--[if mso]></td></tr></table><![endif]-->
<!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
<div style="float: left; width: 100%" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td align="center" width="640" style="width: 640px; min-width: 640px;" class="wrapto320px">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto320px">
<tr>
<td align="left">
<table role="presentation" width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0" bgcolor="#fff">
<tr>
<td align="center" valign="top" style="padding: 0px 0px 0px 0px;" class="textcenter">
<table width="100%" style="min-width: 100%;" border="0" align="left" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="font-family: 'Roboto Condensed', Arial, sans-serif; line-height: 21px; color: #000000;" class="textcenter">
<table align="left" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
<tr>
<td width="600" align="left" style="padding: 0px 0px 0px 20px; font-family: 'Roboto Condensed', Arial, serif; color: #ffffff;" class="textcenter">
<b><a align="left" href="" style="color: #000000; font-size: 30px; text-align: left; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;">EXPLORE</a></b>
<br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 0px 20px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tr>
<td style="padding: 0px 0px 0px 20px; ">
<!--button-->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner nomob">
<tr>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">FIRST</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">SECOND</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">THIRD</a></td>
<td width="20" align="center" bgcolor="#ffffff"> </td>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">FORTH</a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="width: 0; overflow: hidden; float: left; display: none; max-height: 0px; mso-hide: all;" class="show">
<table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner">
<tr>
<td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;">
<a rel="noopener noreferrer" href=" target=" _blank " style="color: #000000; text-decoration: none; display: block; ">FIRST</a></td>
<td width="20 " align="center " bgcolor="#ffffff "> </td>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">SECOND</a></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">THIRD</a></td>
<td width="20 " align="center " bgcolor="#ffffff "> </td>
<td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">FORTH</a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="font-size: 0px;mso-line-height-rule: exactly;-webkit-text-size-adjust: none;-ms-text-size-adjust: none;font-family: 'Roboto Condensed', sans-serif;border-collapse: collapse; " class="nomob "> </td>
</tr>
</table>
</div>
</body>
</html>
#media screen and (min-device-width:641px),
screen and (min-width:641px) {
.gapmob {
display: none!important;
}}
Add this code in CSS
Related
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<title></title>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
img {
display: block;
border-style: none;
line-height: 0px;
}
div,
p,
a,
li,
td,
th {
-webkit-text-size-adjust: none;
}
table {
display: table;
border-spacing: 0px;
padding: 0;
}
td {
border: 0;
padding: 0;
}
.two-column .contents {
font-size: 14px;
text-align: left;
}
.two-column img {
width: 100%;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 294px;
display: inline-block;
vertical-align: top;
}
.contents {
width: 100%;
}
.mobile-show {
display: none !important;
font-size: 0 !important;
max-height: 0 !important;
line-height: 0 !important;
padding: 0 !important;
mso-hide: all !important;
/* hide elements in Outlook 2007-2013 */
}
.IconText {
font-size: 11px!important;
line-height: 13px!important;
}
input {
display: none !important;
}
input[id=effect]+div[class=em_show_g] {
display: block;
}
.button {
background-color: #F7E3DA;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: #FFC9FF;
}
#media only screen and (max-width:480px) {
.mobalign {
text-align: center !important;
}
.FullWidth {
width: 100%!important;
height: auto;
}
.mobile-hide {
display: none;
}
.mobile-show {
display: block !important;
margin: 0 !important;
overflow: visible !important;
visibility: visible !important;
width: auto !important;
max-height: inherit !important;
}
.mobile-brands {
width: 95% !important;
max-width: 95% !important;
}
.StackColumn {
display: block;
width: 100% !important;
text-align: center;
}
.OneFromTwo {
display: block;
width: 100% !important;
}
.CentreText {
text-align: center!important;
}
.CTA-Full {
width: 100% !important;
}
.SpacerHeight {
width: 1px;
height: 35px;
}
input[id=effect]+div[class=em_show_g] {
display: none;
}
input[id=effect]:checked+div[class=em_show_g] {
display: block !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
}
.button {
background-color: #F7E3DA;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button:hover {
background-color: #FFC9FF;
}
}
</style>
<!--[if mso]>
<style>
span, td, th, table, div, a {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
<style type="text/css">
</style>
</head>
<body background="" bgcolor="#eceef3" style="">
<table cellpadding="0" cellspacing="0" style="border: 0px; padding: 0px; margin: 0px; position: absolute; display: none; float: left">
<tr>
<td height="1" style="font-size: 1px; line-height: 1px; padding: 0px;">
<!--Start BK pixel-->
<IMG SRC="" HEIGHT="1" WIDTH="1" /><br/><br/>
<!--End BK pixel-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<!--<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-family:Helvetica, Arial, sans-serif;">
<tr>
<td align="center">-->
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="content" style="margin:0 auto; table-layout:fixed; max-width:600px; width:100%; font-family: 'Lato', Helvetica, Arial, sans-serif; background:#ffffff; font-weight: 300;">
<!-- Preheader -->
<tbody>
<tr>
<td align="center" bgcolor="#FFFFFF" width="100%">
<div data-content-region-name="Pre_Header">
<!-- Preheader -->
<tr class="mobile-hide">
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
<tr>
<td align="center" style="font-family: 'Lato', Helvetica, Arial, sans-serif; color:#1e1e1e; font-weight: 300; font-size:12px; line-height:18px; padding:20px;" width="100%">
</td>
</tr>
</table>
</td>
</tr>
<!-- Pre-Header End -->
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th align="center">
<table align="center" bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" style="background:#ffffff;" width="100%">
<tbody>
<tr>
<th align="left" style="padding-left: 20px; padding-bottom: 20px; padding-top: 20px;" width="50%">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="FullWidth" width="170">
<tbody>
<tr>
<th align="center" width="20">
<img alt="" border="0" height="20" src="" style="display: block; padding-right: 5px" width="16" />
</th>
<th align="center" style="width: 20px">
<img alt="" border="0" height="20" src="" style="display: block;" width="16" />
</th>
</tr>
</tbody>
</table>
</th>
<th align="right" style="padding-right: 20px" width="50%">
<table align="right" border="0" cellpadding="0" cellspacing="0" class="FullWidth" width="150">
<tbody>
<tr>
<th align="right" width="23">
<img alt="View in browser" border="0" class="mobile-hide" height="16" src="" style="display: block;" width="23" />
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
<!-- Header Image End -->
<!-- Header -->
<!-- Header Image End -->
<!-- Desktop Navigation -->
<!-- Desktop Navigation End -->
<!-- Content Starts Here -->
<tr>
<td width="100%" align="center">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="max-width:600px; width:100%; font-size:0px;" style="display:block; line-height:0px;">
<table style="max-width:600px; width:100%; line-height:0px; display:block; ">
<tr>
<td width="50%" height="auto" align="center" style="line-height:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
<td width="50%" height="auto" align="center" style="line-height:0px; font-size:0px;">
<a href="#" target="_blank">
<img src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<a href="#" target="_blank">
<img style="display:block;border:0;" src="" width="100%" height="auto" alt="" /></a>
</td>
</tr>
I've been trying to design an email template which has images. I use table structure to create the email with HTML and CSS. However, I see white lines between the images in different platforms. I don't have a problem in Gmail desktop, but I see white lines when opened in Gmail mobile app. How can this be fixed? I've also tried adding display: block; and font-size: 0px; but the issue still exists.
Try this code brother
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Hi there,</p>
<p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Call To Action </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p>Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
<br> Don't like these emails? Unsubscribe.
</td>
</tr>
<tr>
<td class="content-block powered-by">
Powered by HTMLemail.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
On responsive the other 2 or more elements are collapsing(http://prntscr.com/m2x4ke) What am I doing wrong? It is everywhere perfect except MacOS iOS email agent.
I have tried everything i knew. display to change and width 100% but it doesnt works.All !important are on their places. Have anyone any ideas about this issue.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="viewport"
content="min-width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, date=no">
<meta charset="UTF-8">
<title>Title</title>
<style>
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
html {
/*-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;*/
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body style="-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; ">
<style>
#media screen and (max-width: 650px) {
table {
border-spacing: 0;
}
.container {
width: 100% !important;
max-width: 600px;
min-width: 0 !important;
}
.resp-td {
width: 239px !important;
max-width: 100%;
margin: 0 auto;
display: block;
padding: 0 !important;
}
.resp-td {
width: 100% !important;
}
.resp-td {
padding: 0 0 50px 0 !important;
}
.number-color a {
color: #9a9b9b !important;
text-decoration: none !important;
}
* {
-webkit-text-size-adjust: none;
box-sizing: border-box !important;
}
}
#media screen and (max-width: 380px) {
.resp-td {
/*width: 68.3% !important;*/
}
}
#media screen and (max-width: 320px) {
.resp-td {
/*width: 82.3% !important;*/
}
}
</style>
<!--[if gte mso 9]>
<style>
ul, ol, dl {
display: block;
list-style-position: outside !important;
margin: 0 0 10px 18px;
padding: 0;
text-align: left;
}
ul li {
margin: 0 0 0 10px;
padding-left: 20px;
}
ol li {
margin: 0 0 0 10px;
padding-left: 20px;
}
li:last-child, li:last-of-type {
margin-bottom: 0;
}
dt {
font-weight: bold;
line-height: 18px;
margin: 0 0 4px;
padding: 0;
text-align: left;
vertical-align: middle;
}
dd {
line-height: 18px;
margin: 0 0 8px;
padding: 0;
text-align: left;
vertical-align: middle;
}
</style>
<![endif]-->
<table align="center" cellpadding="0" cellspacing="0"
style="background-color:#ffffff; font-family: sans-serif; margin:0; padding:0; width:100% !important; text-align: left; border-spacing: 0; border-collapse: collapse; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;mso-cellspacing: 0; mso-padding-alt: 0;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="container" align="center" width="600"
style="mso-cellspacing: 0; mso-padding-alt: 0;border-collapse: collapse; border-spacing: 0; width: 600px; max-width: 600px; min-width: 600px;margin: 0 auto; font-family: sans-serif;">
<tbody>
<tr>
<td style="padding-left: 10px; padding-right: 10px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="resp-td" width="33.3%" style="padding-right: 6px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="resp-td" width="33.3%" style="padding-left: 4px;padding-right: 4px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="resp-td" width="33.3%" style="padding-left: 6px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0">
<a href="#"><p
style="color: #ffffff; font-family: sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
Ipsum</p></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
It should be under by one. Like block elements. Ordinary display block doesnt helpd at all. And I have collapsing of other 2 elements
It seems for such layout http://prntscr.com/m2xzf8 and more in a row better to replace <td> with <th> and the problem is solved and you will have this outlook http://prntscr.com/m2xzuh except of this http://prntscr.com/m2y02e.
I am creating Email Template and footer is not display proper only on iphone's portrait mode. it is not in 100% width.
This the code and footer is meshed up on iphone's mail..
Please give me solution for this...
https://drive.google.com/open?id=1791KTM_aTog1Os_IpD41CFZLqQKfT7TQ
in this image footer is fine but iphone it only comes with 70% of width.
#media only screen and (max-width: 480px) {
body {
margin: 0 !important;
padding: 0px !important;
border: 10px solid #f0f0f0 !important
}
table.main {
width: 340px !important;
margin: 0 auto
}
table {
display: block !important;
width: 100%
}
table td {
display: block;
width: 100%
}
td {
width: 100% !important;
text-align: left !important;
padding: 10px 0 0 0 !important
}
p {
text-align: left !important
}
h2 {
text-align: left !important
}
h3 {
text-align: left !important
}
h4 {
text-align: left !important
}
table td table td {
display: block;
width: 100%;
padding-left: 0 !important
}
tr td:first-child hr {
display: none
}
table.main_table br {
display: none
}
}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Email Template</title>
<body style="background-color: #f0f0f0; font-family: Arial, Helvetica, sans-serif; padding-top: 20px; padding-bottom:20px;">
<table align="center" border="0" cellpadding="0" cellspacing="20" width="600" class="main" style="font-family: Arial, Helvetica, sans-serif; padding: 0;background:#fff;">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="margin-bottom: 15px; border-bottom: 1px solid #ccc; padding-bottom: 12px; font-family: Arial, Helvetica, sans-serif;">
<tr>
<td rowspan="2" style="width: 220px;"><img src="https://www.trimarkpremier.com/images/email/trimarkLogo.jpg"></td>
<td align="right" style="padding-top: 10px; color: #A9273D; font-size: 11px; font-family: 'open sans light', sans-serif;"> About Us | Interactive Catalog | Insights & Resources | Contact Us</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style=" font-family: 'Open Sans', sans serif; background:#fff;">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="color: #A9273D; font-family: 'Open Sans', sans serif; background:#fff;">
<tr>
<td align="center" style="text-align: center !important; border-top: 1px solid #ccc; padding-top:15px;">
<p style="text-align: center !important;">
<img src="http://trimarkpremier.com/images/email/footer_logo.png" style="text-align: center; margin: 0;">
</p>
www.trimarkpremier.com | info#trimarkpremier.com
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I'm working on a two-column reponsive email. Everything is appearing perfect except that I can't get the right border in one of my TDs to remove on mobile. I have the following style set:
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
Strangely, the bottom border is adding just fine.
Here is my code. Any help would be greatly appreciated. I can't figure this one out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#media only screen and (max-width: 660px) {
table.view { width: 480px !important; }
table.container { width: 480px !important; }
table.left { width: 260px !important; }
table.right { width: 140px !important; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off-sm.gif) no-repeat;
height: 75px;
background-repeat: no-repeat !important;
background-position: center !important;
}
td.contact table { width: 100% !important; text-align: center;}
table.info p { text-align:center;}
table.copy { width: 480px !important; }
}
#media only screen and (max-width: 510px) {
table.view { width: 100% !important; }
table.container { width: 100% !important; }
table.left { width: 100% !important; margin-bottom: 10px; }
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
table.right { width: 100% !important; }
table.video td { padding-top: 15px; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif) no-repeat;
height: 88px;
background-repeat: no-repeat !important;
background-position: center !important;
vertical-align: middle;
text-align: center; }
table.copy { width: 100% !important; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="view">
<tr>
<td align="right" valign="middle" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:100%; color: #666; background: #FFF; padding: 8px 10px 8px 10px; vertical-align:middle;"><img src="http://www2.poscorp.com/images/addthis/16x16/email.png" alt="Forward Email" width="13" height="13" style="vertical-align: sub;"> Forward to a Friend | Email not displaying correctly? View it in your browser.</td>
</tr>
</table>
<table class="container" align="center" width="600" border="0" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF" style="border:1px solid #CCC;">
<tr>
<td class="header" bgcolor="#ffffff" style="border-top: #00a160 solid 10px; padding: 20px 60px 20px 20px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 27px; line-height:140%; color: #00a160; background: #FFF; ">When communicating with your patients, <span style="font-weight:bold;">consistency counts.</span></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 20px 20px;">
<table width="340" border="0" cellspacing="0" cellpadding="0" align="left" class="left" >
<tr>
<td class="copy" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; border-right: solid #00a160 1px; padding-right:20px;"><p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">POS provides practices customized print and digital communication to ensure your brand stands out – and that it stays consistent from one communication solution to the next. From print and messaging to billing and surveying, our services help you deliver communications in the patient’s preferred way, increase practice revenue and improve patient satisfaction.</p>
<p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">It's how you'll build loyalty while helping keep your patients healthy.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Print – With print services from POS, you’ll receive clarity, convenience and consistency – from your practice stationery to marketing materials.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Statement Processing & Patient Payment Services – POS provides solutions to improve your practice's profitability. We specialize in driving down the cost of collecting your patient-owed balances through our Statement Processing, Online Bill Pay and Past Due Notification solutions.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Digital Messaging – Our automated communication system, POS Messaging™, lets you send customized, two-way communication to your patients via email, phone, text or mail to help you reduce no-shows and more.</p>
<p style="margin-bottom: 0px; margin-top: 15px;">Patient Surveys – With POS Surveys™, you can find out what your patients like about your practice and what you can improve so they don’t leave.</p></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="right" class="right" >
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="video">
<tr>
<td style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; border-bottom: 1px #00a160 solid;"><p style="margin-top:0px; margin-bottom: 15px; text-align:center;"><img src="http://www3.poscorp.com/emarketing/market-growth/blog-logo.gif" alt="POS Blog - Communicate" width="150" height="69"></p>
<p style="margin-top:0px; margin-bottom: 10px;">The blog for best practices in patient communication.</p>
<p style="margin-top:0px; margin-bottom: 20px;">JOIN NOW</p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="promo">
<tr>
<td align="center" valign="middle" class="design"><p style="text-align:center; vertical-align:middle;" ><img src="http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif" width="200" height="88" alt="Free Design and 25% a new print item"></p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 10px 20px 20px 20px;"><p style="margin: 0px; ">For more information, contact your Regional Territory Manager, <span style="font-weight:bold;">%%user_name%%</span> at <span style="font-weight:bold;">%%user_phone%%</span> or <span style="font-weight:bold;">%%user_email%%</span>.</p></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 0px 20px; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><p style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 5px 0px 5px 0px; border-top: #CCC solid 1px; border-bottom:#CCC solid 1px; text-align:center; letter-spacing: 1px;">PRINT <span style="color:#00a160;">|</span> STATEMENT PROCESSING <span style="color:#00a160;">|</span> DIGITAL MESSAGING <span style="color:#00a160;">|</span> PATIENT SURVEYS</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><img src="http://www3.poscorp.com/emarketing/master/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></td>
</tr>
</table>
<table width="265" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td align="right"><p style="font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 100%; color: #333; font-weight:bold; margin:19px 0px 5px 0px;">800.331.4976 <span style="color:#00a160;">|</span> poscorp.com <span style="color:#00a160;">|</span> <img src="http://www3.poscorp.com/emarketing/master/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/> <img src="http://www3.poscorp.com/emarketing/master/youtube.jpg" width="39" height="16" alt="YouTube" border="0" style="vertical-align:bottom;"></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="copy">
<tr>
<td bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:120%; color: #666; background: #FFF; padding: 10px 10px 10px 10px; border-top:1px solid #CCC;">
<p style="margin-top: 0px; margin-bottom:10px;"><span style="font-weight:bold;">Our mailing address is:</span> <br>
%%account_address%%</p>
<p style="margin-top: 10px; margin-bottom:0px;">update subscription preferences</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Did you add it to the media query?, dont forget !important.
Excuse my newbie coding because it's a Frankenstein mix of hundreds of email layouts, but can someone tell me why my table layout is not displaying the columned tables side-by-side?
It's the two td elements with the class name container-small at 50% width that won't position side-by-side. I'm not using float or divs.
Is it because they're separate tables when they should be part of the same td? Please feel free to make other amendments/suggestions so I can improve my layout. The left column must be 283px exactly, but the right column can be 100% fluid. That's really the only requirement.
<!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"/>
<style type="text/css">
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
the problem is here:
.container-small {
display: block !important;
width: 100% !important;
}
just remove this two properties above.
Snippet below:
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
/* REMOVE HERE
.container-small {
display: block !important;
width: 100% !important;
}
*/
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
</center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>