I can not fix the issue of the background image of a newsletter in gmail. In yahoo, webmail the bgimage is centered but gmail keeps aligning it to the left of the screen! I tried several codes but nothing works.
What can I do to fix it?
Thanks
here's the code
<link href='http://ift.tt/1i6d3Me' rel='stylesheet' type='text/css'>
<link href='http://ift.tt/LdqVFo' rel='stylesheet' type='text/css'>
<title>Newsletter</title>
<style type="text/css">
body{
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
mso-margin-top-alt:0px; mso-margin-bottom-alt:0px; mso-padding-alt: 0px 0px 0px 0px;
}
p,h1,h2,h3,h4{
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
}
span.preheader{display: none; font-size: 1px;}
html{
width: 100%;
}
table{
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
@media only screen and (max-width: 798px){
body[yahoo] .hide-800{display: none !important;}
body[yahoo] .container800{width: 100% !important;}
body[yahoo] .container800_img{width: 40% !important;}
body[yahoo] .section800_img img{width: 100% !important; height: auto !important;}
body[yahoo] .half-container800{width: 55% !important;}
}
@media only screen and (max-width: 640px){
/*------ top header ------ */
body[yahoo] .main-header{font-size: 20px !important;}
body[yahoo] .main-section-header{font-size: 30px !important;}
body[yahoo] .show{display: block !important;}
body[yahoo] .hide{display: none !important;}
body[yahoo] .align-center{text-align: center !important;}
/*----- main image -------*/
body[yahoo] .main-image img{width: 440px !important; height: auto !important;}
/* ====== divider ====== */
body[yahoo] .divider img{width: 440px !important;}
/*--------- banner ----------*/
body[yahoo] .banner img{width: 440px !important; height: auto !important;}
/*-------- container --------*/
body[yahoo] .container590{width: 440px !important;}
body[yahoo] .container580{width: 400px !important;}
body[yahoo] .container800{width: 440px !important;}
body[yahoo] .container800_img{width: 100% !important;}
body[yahoo] .section800_img img{width: 80% !important;}
body[yahoo] .half-container{width: 220px !important;}
body[yahoo] .main-button{width: 140px !important;}
/*-------- secions ----------*/
body[yahoo] .section-item{width: 440px !important;}
body[yahoo] .section-img img{width: 300px !important; height: auto !important;}
}
@media only screen and (max-width: 479px){
/*------ top header ------ */
body[yahoo] .main-header{font-size: 20px !important;}
body[yahoo] .main-section-header{font-size: 26px !important;}
/*----- main image -------*/
body[yahoo] .main-image img{width: 280px !important; height: auto !important;}
/* ====== divider ====== */
body[yahoo] .divider img{width: 280px !important;}
body[yahoo] .align-center{text-align: center !important;}
/*--------- banner ----------*/
body[yahoo] .banner img{width: 280px !important; height: auto !important;}
/*-------- container --------*/
body[yahoo] .container590{width: 280px !important;}
body[yahoo] .container580{width: 260px !important;}
body[yahoo] .container800_img{width: 100% !important;}
body[yahoo] .section800_img img{width: 80% !important;}
body[yahoo] .half-container800{width: 55% !important;}
body[yahoo] .wide-iphone{width: 210px !important;}
body[yahoo] .half-container{width: 200px !important;}
body[yahoo] .main-button{width: 200px !important;}
/*-------- secions ----------*/
body[yahoo] .section-item{width: 280px !important;}
body[yahoo] .section-item-iphone{width: 280px !important;}
body[yahoo] .section-img img{width: 280px !important; height: auto !important;}
body[yahoo] .section-iphone-img img{width: 280px !important; height: auto !important;}
/*------- CTA -------------*/
body[yahoo] .cta-btn img{width: 260px !important; height: auto !important;}
}
</style>
</head>
<body yahoo="fix" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="dce0ec" style="background-image: url(http://ift.tt/1bfMBhE); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; background-position: center;" background="http://ift.tt/1bfMBhE" class="main-bg">
<tbody><tr><td height="50" style="font-size: 50px; line-height: 50px;"> </td></tr>
<tr>
<td align="center">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590">
<tbody><tr>
<td align="center">
<table border="0" width="590" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container580">
<tbody><tr>
<td width="25%" align="left" mc:edit="nav1" style="color: rgb(33, 42, 46); font-size: 12px; font-family: 'Varela Round', Calibri, sans-serif; line-height: 22px;" class="title_color hide">
<!-- ======= section text ====== -->
<div class="editable_text" style="line-height: 22px">
<span class="text_container"><a href=""></a></span>
</div>
</td>
<td width="50%" align="center">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="container590">
<tbody><tr>
<td align="center">
<a href="https://instagram.com" style="display: block; border-style: none !important; border: 0 !important;" class="editable_img"><img editable="true" mc:edit="logo" width="65" border="0" style="display: block; width: auto;" src="" alt="logo" class=""></a>
</td>
</tr>
</tbody></table>
</td>
<td width="25%" align="right" mc:edit="nav2" style="color: rgb(84, 90, 92); font-size: 12px; font-family: 'Varela Round', Calibri, sans-serif; line-height: 22px;" class="text_color hide">
<!-- ======= section text ====== -->
<div class="editable_text" style="line-height: 22px">
<span class="text_container"><p><span style="font-size:11px">Newsletter</span></p>
</span>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
Aucun commentaire:
Enregistrer un commentaire