Responsive design not showing responsive in email - outlook and gmail so far

Anonymous · ‎09-18-2017

I was just about to spend an email and as a test I sent it to myself in outlook for review (desktop). It appears the email is staying in desktop display and not going responsive as I shrink the screen. Also, I forwarded the email to my gmail account and opened it on my cell phone - it shows the same...any ideas to why this I happening?

Geoff_Krajeski1 · ‎09-18-2017

Have you tried a service to test such as Litmus? https://litmus.com/email-testing

Get Real-Time Email Testing with Litmus Email Previews

Anonymous · ‎09-18-2017

No, I haven't tried Litmus. That would definitely help. I'll see if we have an account here already.

Anonymous · ‎09-18-2017

I just tried Inbox Inspector - free service and it's coming up responsive

Hobie_Thompson1 · ‎09-18-2017

Inbox Inspector is a great free service, but there's a reason it's free. It only looks at a fraction of services, and devices. Honestly, your best bet is shelling out for a service like Litmus or Email on Acid.

Dave_Roberts · ‎09-18-2017

Another vote for Litmus here! I'd be lost without it, and they keep adding new stuff to make life easier than ever. Their builder tool is great for making code changes and previewing those immediately (skip the send).

Could you post your code so we could have a look thru it?

It's hard to tell what might be causing that, but b/c you're seeing an issue in gMail and Outlook, it makes me think that it's something in your inline HTML that's wonky. Those two are the most 'literal' readers of HTML in my experience, and they'll usually get thrown by something inline that you think is getting re-styled by the <style> in the <head> or some parent element or something.

Anonymous · ‎09-19-2017

Well I tried Inbox Inspector and created some free email accounts and it appears to be working on my phone, but it doesn't seem to be responsive on the computer here...I'm thinking it may be an IT security thing here...? Take a glance and let me know if anything jumps out to you.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if mso]>

.primary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

<!--[if mso]>

.secondary-font {

font-family: Arial, sans-serif !important;

}

</style>

<![endif]-->

<style>

/*startcommon*/

@media only screen and (max-width: 640px) {

table.m_boxing{

width: 100% !important;

}

/*endcommon*/

</style>

/* 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 */

/* iOS BLUE LINKS */

.appleBody a {

color: .m_000;

text-decoration: none;

}

.appleFooter a {

color: .m_000;

text-decoration: none;

}

@-ms-viewport {

width: device-width;

}

</style>

@media only screen and (max-width: 640px) {

/*starttablet*/

body {

width: auto !important;

}

table.table600{

width: 500px !important;

}

table.table-inner{

width: 86% !important;

}

table.table1-2{

width: 47% !important;

clear: both;

}

table.table1-3{

width: 29.4% !important;

}

table.table1-4{

width: 100% !important;

text-align: left !important;

}

table.table2-3{

width: 64% !important;

text-align: center !important;

}

table.table3-3{

width: 100% !important;

text-align: center !important;

clear: both;

}

table.footer-logo{

width: 10% !important;

text-align: right !important;

}

td.outer{

min-width: 0 !important;

}

td.stack{

padding-bottom: 40px !important;

}

.stack-tablet {

padding-bottom: 20px !important;

overflow: visible !important;

float: none !important;

mso-hide: none !important;

display: block !important;

}

img.mobile-img{

width: 100% !important;

height: auto !important;

}

td.center-tablet{

text-align: center !important;

}

td.hide-tablet{

display: none !important;

}

table.footer-column{

width: 47% !important;

text-align: left !important;

}

.m_header td {

text-align: center !important;

}

.m_hero .background {

background-size: cover !important;

}

.m_overlay-image .background {

background-size: cover !important;

}

.mktoVideoThumbnail{

width: 100% !important;

height: auto!important;

max-height:inherit!important;

min-height:inherit!important;

}

.m_menu {

padding-top: 10px !important;

padding-right: 0 !important;

padding-bottom: 10px !important;

padding-left: 0 !important;

}

.m_menu p {

display: block !important;

padding-top: 0 !important;

padding-right: 0 !important;

padding-bottom: 10px !important;

padding-left: 0 !important;

}

.m_horizontal img {

display: inline-block;

margin-top: 0;

margin-right: auto;

margin-bottom: 30px;

margin-left: auto;

}

.m_article .table1-2 {

width: 100% !important;

clear: both;

}

.m_article .cta table {

margin-top: 0 !important;

margin-right: auto !important;

margin-bottom: 0 !important;

margin-left: auto !important;

}

.m_overlay-image .box {

float: none !important;

width: 220px;

margin-top: 0 !important;

margin-right: auto !important;

margin-bottom: 0 !important;

margin-left: auto !important;

}

.m_contacts .table1-2 {

width: 100% !important;

clear: both;

text-align: center !important;

}

.m_free-image img {

width: 450px !important;

height: auto;

}

.m_team .spacer,

.m_three-articles .spacer {

width: 28px !important;

}

.m_features .spacer {

width: 26px;

}

/*endtablet*/

}

@media only screen and (max-width: 479px) {

/*startmobile*/

body {

width: auto !important;

}

table.table600{

width: 350px !important;

}

table.table-inner{

width: 80% !important;

float: none !important;

}

table.table1-2{

width: 100% !important;

clear: both;

}

table.table1-3{

width: 100% !important;

clear: both;

}

table.table1-4{

width: 100% !important;

text-align: center !important;

}

table.table2-3{

width: 100% !important;

text-align: center !important;

}

table.table3-3{

width: 100% !important;

text-align: center !important;

clear: both;

}

table.footer-logo{

width: 60% !important;

text-align: center !important;

}

td.outer{

min-width: 0 !important;

}

td.td3-1{

width: 60% !important;

text-align: center !important;

}

.stack-smartphone {

padding-bottom: 20px !important;

overflow: visible !important;

float: none !important;

display: block !important;

mso-hide: none !important;

}

td.center-smartphone{

text-align: center !important;

}

img.mobile-img{

width: 100% !important;

}

td.center-tablet{

text-align: center !important;

}

td.hide-smartphone{

display: none !important;

}

table.footer-column{

width: 100% !important;

text-align: center !important;

}

.m_free-image img {

width: 480px !important;

height: auto;

}

.m_horizontal img {

margin-top: 0 !important;

margin-right: auto !important;

margin-bottom: 0 !important;

margin-left: auto !important;

}

.m_hero .background {

background-size: cover !important;

}

.m_overlay-image .background {

background-size: cover !important;

}

/*endmobile*/

}

table.table3-3 { width: 100% !important;

text-align: center !important;

clear: both;

}

table.table3-3 { width: 100% !important;

text-align: center !important;

clear: both;

}

</style>

</head>

</div>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</div> </td>

</tr>

</tbody>

</table>

<tbody>

</tr>

<p style="text-align: center;"><span style="color: #005dab;">Contact your financing specialist for details.</span></p>

</div> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</div>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<p style="text-align: left;"><span style="color: #323232; font-size: 26px;"><strong></strong></span>Panasonic Business Finance is currently offering an <span style="color: #005dab;"><strong>EXCLUSIVE</strong></span> 0% financing option for Panasonic KX-NS700 and KX-NS1000 communication equipment.</p>

<p style="text-align: left;"><span style="color: #005dab;"><strong><span style="font-size: 22px;">PROMOTION DETAILS:</span></strong></span></p>

<ul>

<li style="text-align: left;">0% Finance rate is valid on KX-NS700 and KX-NS1000 and associated Panasonic equipment only<br /></li>

<li style="text-align: left;">36 Month finance term / Purchase Option = $1.00 Buy Out<br /></li>

<li style="text-align: left;">First and last payments required at the time of contract execution<br /></li>

<li style="text-align: left;">Must be on one shippable Purchase Order<br /></li>

<li style="text-align: left;">Services such as installation are not eligible for the 0% rate<br /></li>

<li style="text-align: left;">Extended terms are available upon request<br /></li>

<li>48 Months at 1.99%</li>

<li>60 Months at 2.99%</li>

</ul>

<li style="text-align: left;">Shorter terms, such as 24 months, are available upon request<br /></li>

<li style="text-align: left;">Offer valid between <span style="color: #005dab;"><strong>7/1/17 and 9/30/17</strong></span><br /></li>

<li style="text-align: left;">Subject to credit approval<br /></li>

<li style="text-align: left;">Documentation fee of $150 applies<br /></li>

<li style="text-align: left;">A quotation including Line item pricing must be provided<br /></li>

<li style="text-align: left;">Executed lease documents must be received by <span style="color: #005dab;"><strong>9/28/17</strong></span><br /></li>

<li style="text-align: left;">Installation must occur no later than <span style="color: #005dab;"><strong>10/27/17</strong></span><br /></li>

</ul>

</div> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

<p style="text-align: center;"><span style="font-size: 20px; color: #005dab;"><strong>Contact your assigned National Account Executive for more information.</strong></span><br /></p>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<p><span style="font-size: 20px;"><strong><span style="color: #ffffff;">TERRITORY COVERAGE</span></strong></span><br /><span style="font-size: 20px;"><strong><span style="color: #ffffff;">National Accounts Executive Team</span></strong></span></p>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<table class="table1-3" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;-ms-text-size-adjust: 100%;border-top-width:0;border-right-width:0;border-bottom-width:0;background-color:#ffffff;border-top-style: solid;border-right-style:

solid;border-bottom-style: solid;border-left-style: solid;border-top-color:#ffffff;border-right-color:#ffffff;border-bottom-color:#ffffff;border-left-color:#ffffff;border-left-width:0;" align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="210">

<tbody>

<tr>

<tbody>

<tr>

<span style="color: #38b900;"><a href="http://mylink" style="text-size-adjust: 100%; text-decoration: none; color: #38b900;"><span style="color: #323232;"><strong><span mce-data-marked="1"></span></strong></span></a><strong>Elizabeth Wheeler</strong></span>

<br />

<span style="color: #38b900;"><strong>P:</strong></span> 888-479-9111 ext. 4156

<br />

<strong><span style="color: #38b900;">F:</span> </strong>877-305-6756

<br />

<span style="color: #38b900;"><strong>E:</strong> <a href="mailto:ewheeler@marlinfinance.com" target="_blank" id="">ewheeler@marlinfinance.com</a></span>

</div>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

</tbody>

</table>

<table class="table1-3" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;-ms-text-size-adjust: 100%;border-top-width:0;border-right-width:0;border-bottom-width:0;background-color:#ffffff;border-top-style: solid;border-right-style:

solid;border-bottom-style: solid;border-left-style: solid;border-top-color:#ffffff;border-right-color:#ffffff;border-bottom-color:#ffffff;border-left-color:#ffffff;border-left-width:0;" align="right" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="210">

<tbody>

<tr>

<tbody>

<tr>

<span style="color: #38b900;"><a href="http://mylink" style="text-size-adjust: 100%; text-decoration: none; color: #38b900;"><span style="color: #323232;"><strong><span mce-data-marked="1"></span></strong></span></a><strong>Brian Keller</strong></span>

<br />

<strong><span style="color: #38b900;">P:</span> </strong>888-479-9111 ext. 4334

<br />

<strong><span style="color: #38b900;">F:</span> </strong>877-305-6756

<br />

<span style="color: #38b900;"><strong>E:</strong> <a href="mailto:bkeller@marlinfinance.com" target="_blank" id="">bkeller@marlinfinance.com</a></span>

</div>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<table class="table1-3" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;-ms-text-size-adjust: 100%;border-top-width:0;border-right-width:0;border-bottom-width:0;background-color:#ffffff;border-top-style: solid;border-right-style:

solid;border-bottom-style: solid;border-left-style: solid;border-top-color:#ffffff;border-right-color:#ffffff;border-bottom-color:#ffffff;border-left-color:#ffffff;border-left-width:0;" align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="210">

<tbody>

<tr>

<tbody>

<tr>

<strong><span style="color: #38b900;">Lanni Barkow</span></strong>

<br />

<span style="color: #38b900;"><strong>P:</strong> </span>888-479-9111 ext. 4168

<br />

<strong><span style="color: #38b900;">F:</span> </strong>877-305-6756

<br />

<span style="color: #38b900;"><strong>E:</strong> <a href="mailto:lbarkow@marlinfinance.com" target="_blank" id="">lbarkow@marlinfinance.com</a></span>

</div>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

</tbody>

</table>

<table class="table1-3" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;-ms-text-size-adjust: 100%;border-top-width:0;border-right-width:0;border-bottom-width:0;background-color:#ffffff;border-top-style: solid;border-right-style:

solid;border-bottom-style: solid;border-left-style: solid;border-top-color:#ffffff;border-right-color:#ffffff;border-bottom-color:#ffffff;border-left-color:#ffffff;border-left-width:0;" align="right" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="210">

<tbody>

<tr>

<tbody>

<tr>

<strong><span style="color: #38b900;">Brian Dover</span></strong>

<br />

<span style="color: #38b900;"><strong>P:</strong></span> 888-479-9111 ext. 4368

<br />

<span style="color: #38b900;"><strong>F:</strong> </span>877-305-6756

<br />

<span style="color: #38b900;"><strong>E:</strong> <a href="mailto:bdover@marlinfinance.com" target="_blank" id="">bdover@marlinfinance.com</a></span>

</div>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

<tr>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

<td class="bordered" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Montserrat', Arial, sans-serif;-ms-text-size-adjust:

100%;background-color:#ffffff;border-top-width:0;border-left-color:#ffffff;border-bottom-width:0;border-left-width:0;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style:

solid;border-top-color:#ffffff;border-right-color:#ffffff;border-bottom-color:#ffffff;border-right-width:0;border-collapse: collapse;" bgcolor="#f2f2f5">

<tbody>

<tr>

<tbody>

<tr>

<p><span style="color: #323232;" mce-data-marked="1"><strong>PROGRAM MANAGER</strong></span></p>

</div> </td>

</tr>

<tr>

<td class="secondary-font text" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;padding-left: 20px;font-family:'Questrial', Arial, sans-serif;color: #7e878b;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom:

0;border-collapse: collapse;">

<p><span style="font-family: arial, helvetica, sans-serif;"><strong><span style="font-size: 14px;"><span style="color: #38b900;">John Gundersen</span></span></strong></span><br /><span style="font-size: 14px; font-family: arial, helvetica, sans-serif;"><span style="color: #38b900;"><strong>P:</strong></span> <span style="color: #000000;">888-479-9111 ext. 4340</span> <span style="color: #38b900;"><strong>F:</strong></span> <span style="color: #000000;">877-305-6756 </span><strong><span style="color: #38b900;">E:</span></strong> <span style="color: #000000;"><a href="mailto:jgundersen@marlinfinance.com" target="_blank" id="">jgundersen@marlinfinance.com</a></span></span></p>

</div> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<p style="text-align: left;"><span style="font-size: 10px; color: #000000;">This email was sent to your email by Marlin Business Services Corp.</span><br style="color: #7e878b; font-family: Montserrat, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left;

text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #2085c6;" /><span style="font-size: 10px; color: #000000;">Mt. Laurel Office | 300 Fellowship Rd | Mount Laurel | NJ | 08054</span><br style="color: #7e878b; font-family: Montserrat, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing:

0px; -webkit-text-stroke-width: 0px; background-color: #2085c6;" /><span style="font-size: 10px; color: #000000;"><a href="mailto:marketing@marlinfinance.com" target="_blank" id="">marketing@marlinfinance.com</a> | (888) 479-9111</span></p>

</div> </td>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<p style="text-align: left;"><em><span style="color: #000000; font-size: 10px;">This promotion can not be utilized in conjunction with any other promotion being offered by Panasonic Business Finance or special pricing being offered by Panasonic.</span></em></p>

<p style="text-align: left;"><em><span style="color: #000000; font-size: 10px;">Each transaction must be credit approved. Rates subject to change. Valid on finance agreements closed between 7/1/17 and 9/30/17. Certain equipment restrictions may apply. Not applicable for organizations that have been in business less than 2 years.</span></em></p>

</div> </td>

</tr>

<tr>

</tr>

</tbody>

</table>

</center> </td>

</tr>

</tbody>

</table></td>

</tr>

</tbody>

</table> </td>

</tr>

</tbody>

</table>

</body>

</html>

Akshay_Pant · ‎09-22-2017

Hi Dante Murphy,

Please use this attached HTML code.

This works fine in gmail app, android and also in outlook.

Thanks,

Akshay Pant

Anonymous · ‎09-19-2017

Are you using the right email template? That might contain the external CSS the email needs to be responsive. FYI gmail might not show background colours

Anonymous · ‎09-19-2017

I just made a reply with my code...please let me know if anything jumps out that could be causing the issue.

Responsive design not showing responsive in email - outlook and gmail so far

Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far

Re: Responsive design not showing responsive in email - outlook and gmail so far