Responsive Auto Responder
-
Aloha,
I have a responsive email template that I want to send after people fill out my form. It works however the response I get back is laid out correctly it just isn’t responsive. I know it works just cant figure it out in Contact For 7.
I get the email fine however there is a problem with the @media screen at the top of the email.
Below is the entire code. Thanks!
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Webmaster Services Hawaii</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<style type=”text/css”>
/* 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) {
/* ALLOWS FOR FLUID TABLES */
table[class=”wrapper”] {
width: 100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
td[class=”logo”] {
text-align: left;
padding: 20px 0 20px 0 !important;
}
td[class=”logo”] img {
margin: 0 auto!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;
height: auto !important;
}
/* FULL-WIDTH TABLES */
table[class=”responsive-table”] {
width: 100%!important;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class=”padding”] {
padding: 10px 5% 15px 5% !important;
}
td[class=”padding-copy”] {
padding: 10px 5% 10px 5% !important;
text-align: center;
}
td[class=”padding-meta”] {
padding: 30px 5% 0px 5% !important;
text-align: center;
}
td[class=”no-pad”] {
padding: 0 0 20px 0 !important;
}
td[class=”no-padding”] {
padding: 0 !important;
}
td[class=”section-padding”] {
padding: 50px 15px 50px 15px !important;
}
td[class=”section-padding-bottom-image”] {
padding: 50px 15px 0 15px !important;
}
/* ADJUST BUTTONS ON MOBILE */
td[class=”mobile-wrapper”] {
padding: 10px 5% 15px 5% !important;
}
table[class=”mobile-button-container”] {
margin: 0 auto;
width: 100% !important;
}
a[class=”mobile-button”] {
width: 80% !important;
padding: 15px !important;
border: 0 !important;
font-size: 16px !important;
}
}
</style>
</head>
<body style=”margin: 0; padding: 0;”><!– HEADER –>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
<tr>
<td bgcolor=”#ffffff”><div align=”center” style=”padding: 0px 15px 0px 15px;”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”500″ class=”wrapper”>
<!– LOGO/PREHEADER TEXT –>
<tr>
<td style=”padding: 20px 0px 30px 0px;” class=”logo”><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
<tr>
<td bgcolor=”#ffffff” width=”100″ align=”left”><img alt=”Logo” src=”http://www.webmasterserviceshawaii.com/wp-filessystem/uploads/2015/03/supersmall4.png” style=”display: block; font-family: Helvetica, Arial, sans-serif; color: #666666; font-size: 16px;” border=”0″></td>
<td bgcolor=”#ffffff” width=”400″ align=”right” class=”mobile-hide”><table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”right” style=”padding: 0 0 5px 0; font-size: 14px; font-family: Arial, sans-serif; color: #666666; text-decoration: none;”><span style=”color: #666666; text-decoration: none;”>We offer everything you need to have a successful online presence </span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div></td>
</tr>
</table><!– ONE COLUMN SECTION –>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
<tr>
<td bgcolor=”#ffffff” align=”center” style=”padding: 70px 15px 70px 15px;” class=”section-padding”><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”500″ class=”responsive-table”>
<tr>
<td><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><!– HERO IMAGE –><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td class=”padding-copy”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><img src=”http://www.webmasterserviceshawaii.com/newsletter/images/Ecommerce_SEO_Tips_Shopify_Shopping_Cart_Software_Blog_1.jpg” width=”500″ height=”200″ border=”0″ alt=”Can an email really be responsive?” style=”display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 500px; height: 200px;” class=”img-max”></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><!– COPY –><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center” style=”font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 30px;” class=”padding-copy”>$395. Yes *|FNAME|* you can afford QUALITY SEO Services in Hawaii!
</td>
</tr>
<tr>
<td align=”center” style=”padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;” class=”padding-copy”>We offer everything you need to have a successful online presence especially here in Hawaii! Through our proven marketing strategies, you’ll turn visitors into leads, leads into customers, and customers into advocates of your brand. </td>
</tr>
</table></td>
</tr>
<tr>
<td><!– BULLETPROOF BUTTON –><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”mobile-button-container”>
<tr>
<td align=”center” style=”padding: 25px 0 0 0;” class=”padding-copy”><table border=”0″ cellspacing=”0″ cellpadding=”0″ class=”responsive-table”>
<tr>
<td align=”center”>Learn How →</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table><!– ONE COLUMN W/ BOTTOM IMAGE SECTION –>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
<tr>
<td bgcolor=”#f8f8f8″ align=”center” style=”padding: 70px 15px 0 15px;” class=”section-padding-bottom-image”><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”500″ class=”responsive-table”>
<tr>
<td><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><!– COPY –><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center” style=”font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333;” class=”padding-copy”>Mobile opens are up 48%!</td>
</tr>
<tr>
<td align=”center” style=”padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;” class=”padding-copy”>With an increasingly mobile audience, can you really afford to not have your website mobile responsive?</td>
</tr>
</table></td>
</tr>
<tr>
<td><!– BULLETPROOF BUTTON –><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”mobile-button-container”>
<tr>
<td align=”center” style=”padding: 25px 0 0 0;” class=”padding-copy”><table border=”0″ cellspacing=”0″ cellpadding=”0″ class=”responsive-table”>
<tr>
<td align=”center”>Heck No →</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><!– BOTTOM IMAGE –><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td style=”padding: 50px 0 0 0;” align=”center”><img src=”http://www.webmasterserviceshawaii.com/newsletter/images/line-graph.jpg” width=”500″ height=”180″ border=”0″ alt=”Mobile opens are on the rise” class=”img-max” style=”display: block; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #666666; width: 500px; height: 180px;”></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table><!– TWO COLUMN SECTION –>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
<tr>
<td bgcolor=”#ffffff” align=”center” style=”padding: 70px 15px 70px 15px;” class=”section-padding”><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”500″ class=”responsive-table”>
<tr>
<td><!– TITLE SECTION AND COPY –><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center” style=”font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333;” class=”padding-copy”>How does it work?</td>
</tr>
<tr>
<td align=”center” style=”padding: 20px 0 20px 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;” class=”padding-copy”>Your website is the starting point of SEO services. The climb to the top in search results starts with on page optimization and gains momentum with off page SEO optimization, a rather convoluted and time consuming process akin to growing a tree and then harvesting fruits of hard labor for years. These two services are crucial if you want high volume of targeted traffic over time.</td>
</tr>
</table></td>
</tr>
<tr>
<td><!– TWO COLUMNS –><table cellspacing=”0″ cellpadding=”0″ border=”0″ width=”100%”>
<tr>
<td valign=”top” style=”padding: 0;” class=”mobile-wrapper”><!– LEFT COLUMN –><table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”47%” align=”left” class=”responsive-table”>
<tr>
<td style=”padding: 20px 0 40px 0;”><table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%”>
<tr>
<td align=”center” bgcolor=”#ffffff” valign=”middle”><img src=”http://www.webmasterserviceshawaii.com/newsletter/images/seo-services.jpg” style=”display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; ” alt=”Fluid images” border=”0″ class=”img-max”></td>
</tr><tr>
<td align=”center”>Learn How →</td>
</tr></table></td></tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr><table cellspacing=”0″ cellpadding=”0″ border=”0″ width=”100%”>
<tr><table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”47%” align=”left” class=”responsive-table”>
<tr> </tr>
</table>
</tr>
</table>
</tr>
</table><!– FOOTER –>
<center><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%” id=”canspamBarWrapper” style=”background-color:#FFFFFF; border-top:1px solid #E5E5E5;”>
<tr>
<td align=”center” valign=”top” style=”padding-top:20px; padding-bottom:20px;”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ id=”canspamBar”>
<tr>
<td align=”center” valign=”top” style=”color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;”>
This email was sent to *|EMAIL|*why did I get this? unsubscribe from this list update subscription preferences
*|LIST:ADDRESSLINE|*
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type=”text/css”>
@media only screen and (max-width: 480px){
table[id=”canspamBar”] td{font-size:14px !important;}
table[id=”canspamBar”] td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></body>
</html>
The topic ‘Responsive Auto Responder’ is closed to new replies.
