I have been trying the show / hide and can not get it to work with color blocks. It keeps showing a white gap. Any suggestions.????


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SUNOVION Utibron Clinical Impressions</title>

<!--Utibron Ci Email_1 v1i-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

<style type="text/css">

body {
background-color: #ffffff;
margin: 0px auto !important;
padding: 0px;
width: 100%; }

html {
width: 100%; }

.contentbg { background-color: #ffffff; }

img {
border:0px;
outline:none;
text-decoration:none;
display:block; }

.image_1 {
width: 100%; }

table.customers {
border-collapse: collapse;
border-spacing: 0;
width: 100%; }

span.preheader3{display: none; font-size: 1px;}

a{text-decoration:none;} /* to remove underlines in Windows Mail */

/* Clickable phone numbers - BE SURE TO CHANGE COLOR TO SAME FONT COLOR IN FILE /
a[href^="tel"], a[href^="sms"] {text-decoration:none; color:#000000; pointer-events:none; cursor:default;}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration:default; color:#000000 !important; pointer-events:auto; cursor:default;}
/ End of Clickable phone numbers */

*[class~=hide_on_desktop] { display: none !important;}

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

{
body{width:auto!important;}
table[class=main]{width:446px !important;}
table[class=logo]{width:100% !important;}
table[class=righttop-details]{width:100% !important;}
table[class=social-top]{width:100% !important;}
td[class=viewonline-field]{padding: 10px 0px 0px 0px !important;}
td[id=viewonline]{text-align:center !important;}
td[class=productspace]{display:none !important;}
td[class=productbox]{width:100% !important; display:block;}
td[class=product-hidebox]{height:40px !important; display:block !important;}
td[class=subcontentbox]{width:100% !important; display:block;}
td[class=subcontent-space]{height:20px !important;}
td[class=bottomicon]{width:127px !important;}
table[class=bottomiconbox]{width:100% !important;}
td[class=bottomiconhidebox]{height:6px !important; display:block !important;}
table[class=icon-bottom]{width:100% !important;}
td[class=hidebox]{height:15px !important; display:block !important;}
td[class=hidebox-footer]{height:10px !important; display:block !important;}
td[class=footerbox]{width:100% !important; display:block !important;}

*[class~=hide_on_mobile] { display: none !important;}

*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;

}

@media only screen and (max-width:450px)
{
body{width:auto!important;}
table[class=main]{width:320px !important;}
table[class=logo]{width:100% !important;}
table[class=righttop-details]{width:100% !important;}
table[class=social-top]{width:100% !important;}
td[class=viewonline-field]{padding: 10px 0px 0px 0px !important;}
td[id=viewonline]{text-align:center !important;}
td[class=productspace]{display:none !important;}
td[class=productbox]{width:100% !important; display:block;}
td[class=product-hidebox]{height:40px !important; display:block !important;}
td[class=subcontentbox]{width:100% !important; display:block;}
td[class=subcontent-space]{height:20px !important;}
td[class=bottomicon]{width:127px !important;}
table[class=bottomiconbox]{width:266px !important;}
td[class=bottomiconhidebox]{height:6px !important; display:block !important;}
table[class=icon-bottom]{width:100% !important;}
td[class=hidebox]{height:15px !important; display:block !important;}
td[class=hidebox-footer]{height:10px !important; display:block !important;}
td[class=footerbox]{width:100% !important; display:block !important;}

*[class~=hide_on_mobile] { display: none !important;}

*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;

}
@media only screen and (max-width: 480px){
.emailButton{
max-width:600px !important;
width:100% !important; }

.emailButton a{
display:block !important;
font-size:18px !important; }

td[class=moveinpx] { padding-left:45px !important; }
td[class=moveinpx2] { padding-left:35px !important; }

.endmatter{
max-width:600px !important;
width:100% !important; }
}

</style>

<!-- Internet Explorer fix -->
<!--[if IE]>
<style type="text/css">

@media only screen and (max-width:640px)
{
table[class=subimagebox]{width:100% !important; float:left;}
td[class=main-contentbox]{width:285px !important; float:left; padding-left:75px !important;}
td[class=contentbox]{width:386px !important; float:left; display:block; padding:0px 25px !important;}
table[class=subcontentbox]{width:386px !important; float:left;}
td[class=footerbox]{width:100% !important; float:left; display:block
td[class=productbox]{width:336px !important; float:left; display:block; padding:0px 50px !important;}

}

@media only screen and (max-width:450px)
{
table[class=subimagebox]{width:100% !important; float:left;}
td[class=main-contentbox]{width:285px !important; float:left; padding-left:12px !important;}
td[class=contentbox]{width:100% !important; float:left; display:block; padding:0px !important;}
table[class=subcontentbox]{width:100% !important; float:left;}
td[class=footerbox]{width:100% !important; float:left; display:block;}
td[class=productbox]{width:100% !important; float:left; display:block; padding:0px !important;}

}

</style>
<![endif]-->
<!-- / Internet Explorer fix -->

<!-- Outlook -->
<!--[if gte mso 9]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
</style>
<![endif]-->

<!--[if gte mso 10]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
</style>
<![endif]-->

<!--[if gte mso 15]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
</style>
<![endif]-->

<!--[if gte mso 16]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
*[class~=hide_on_mobile] { display: none !important;}

*[class~=show_on_mobile] {
display : none !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important; font-size: 0;mso-hide:all;}

</style>
<![endif]-->
<!-- / Outlook -->

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="contentbg">

<tr>
<td align="center" style="padding:5px 0px 0px 0px;">

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="main">

<tr>
<td width="5"></td>
<td width="590" valign="top" class="hide_on_mobile">

<img src="http://www.biopharmcommunications.com/deploy/Sunovion/Utibron/Ci/email1_neohaler_hero_small_utibron_ci_new.png" alt="LABA/LAMA Combination with Full Audiovisual Dose Feedback" class="image_1" />

</td>
<td width="5"></td>
</tr>
</table>
</td>
</tr>

<tr>

<td align="center" style="padding:0px 0px 0px 0px; ">

<table width="360" border="0" align="center" cellpadding="0" cellspacing="0" class="main">

<tr>
<td width="5"></td>
<td width="350" class="show_on_mobile" style="padding:0px 0px 0px 0px; width: 0;
max-height: 0;
overflow: hidden;
float: left;
display: none;">
<img src="http://www.biopharmcommunications.com/deploy/Sunovion/Utibron/Ci/email1_neohaler_hero_small_mobile_utibron_ci_new.png" alt="image" class="image_1"/>
</td>
<td width="5"></td>
</tr>
</table>
</td>
</tr>

<tr><td align="center" valign="top">
<table width="590" bgcolor="#0D5480" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td width="5" > </td>
<td valign="top">
<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0" class="main">
<tr>
<td align="center" valign="middle" style="padding:5px 5px 5px 5px;">

<span style="color:#ffffff; font-family:Arial, Verdana, Trebuchet MS, sans-serif; font-size:14px; font-weight:500; line-height:20px; padding:10px 0px 10px 0px;">
<a style="text-decoration:underline; color:#ffffff;" href="http://sunovion.clinicalimpressions.com/Ferguson"><b>View</b></a><b> a Clinical Perspective From Dr. Joans ►</b></span>

</td>
</tr>
</table>
</td>
<td width="5"></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>