Bonjour à tous,
J'ai fait un mail responsive, il s'affiche bien sur un navigateur mais pas sur mobile :
http://prntscr.com/3ha1wi
Voici mon code source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive email</title>
<style type="text/css">
@media only screen and (max-width: 480px){
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
.responsive-image img{
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="640">
<tr>
<td>
<tr>
<td style="font-size: 12px; line-height: 0;" height="57" align="center" class="responsive-image">
<img src="images/header.jpg" alt="" />
<a style="color:#FFFFFF; " href=""><span style="color:#FFFFFF; position: absolute; margin-left: 120px; margin-top: -30px"><font face="Tahoma">Visiter le site</font></span></a>
<a style="color:#FFFFFF; " href=""><span style="color:#FFFFFF; position: absolute; margin-left:205px; margin-top: -30px;"><font face="Tahoma">Devenir Partenaire</font></span></a>
</td>
</tr>
</td>
</tr>
<tr>
<td>
<tr>
<td style="font-size: 18px; line-height: 0;" height="397" align="center" class="responsive-image">
<img src="images/featuredArea.png" alt="" />
<div style="font-weight: bold; font-size: 16; color: #FFFFFF; position: absolute; margin-left: 317px; top: 440px;" align="center"><a style="color: #FFFFFF; text-decoration:none" href="#">Devenir partenaire</a></div>
<span style="position: absolute; margin-left: -98px; top: 200px;"><img src="images/logo.png" alt="" width="199" height="216" /></span>
</td>
</tr>
</td>
</tr>
<tr>
<td>
<tr>
<td style="padding: 10px 10px 20px 10px;">
<div style="font-size:20px;" align="center"><font face="Tahoma">La plateforme Kelip's vous met en relation avec les internautes qualifiés</font></div>
<br/>
<div align="center">
Les demandes de devis de votre secteur géographique vous
</div>
<div align="center">parviennent directement !</div>
</td>
</tr>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="25%">
<tr>
<td>
<tr>
<td style="padding: 0 10px;" align="center" class="responsive-image">
<img src="images/Produit.jpg" width="59" alt=""/>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td>
<div style=" font-weight: bold; font-size: 16px; color: #B9121B;" align="center"><font face="Tahoma">Produits IARD</font></div>
<br/>
<div align="center">
Tous les produits
</div>
<div align="center">des particuliers</div>
</td>
</tr>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="25%">
<tr>
<td>
<tr>
<td style="padding: 0 10px;" align="center" class="responsive-image">
<img src="images/sante.jpg" width="59" height="48" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td>
<div style="font-weight: bold; font-size: 16px; color: #B9121B;" align="center"><font face="Tohama">Santé/Prévoyance</font></div>
<br />
<div align="center">Santé individuelle</div>
<div align="center">et collective, GAV,</div>
<div align="center">Dépendance</div>
</td>
</tr>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="right" width="25%">
<tr>
<td>
<tr>
<td style="padding: 0 10px;" align="center" class="responsive-image">
<img src="images/pro.jpg" width="59" height="48" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td>
<div style="font-weight: bold; font-size: 16px; color: #B9121B;" align="center"><font face="Tohama">Pros et Entreprises</font></div>
<br />
<div align="center">RCP, MRP,</div>
<div align="center">Retraite salariale</div>
</td>
</tr>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="right" width="25%">
<tr>
<td>
<tr>
<td style="padding: 0 10px;" align="center" class="responsive-image">
<img src="images/placement.jpg" width="59" height="48" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td>
<div style="font-weight: bold; font-size: 16px; color: #B9121B;" align="center"><font face="Tohama">Vie et placements</font></div>
<br />
<div align="center">Assurance vie,</div>
<div align="center">Assurance</div>
<div align="center">emprunteur</div>
<div align="center">Epargne</div>
<div align="center">défiscalisation</div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</td>
</tr>
</table>
<tr>
<td>
<tr>
<td style="font-size: 0; line-height: 0;" height="8" align="center" class="responsive-image">
<img src="images/separator.jpg" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td>
<div style="font-size:20px;" align="center"><font face="Tahoma">Préinscrivez-vous !</font></div>
<br />
<div align="center">Grâce à votre préinscription, vous pouvez recevoir</div>
<div align="center">jusqu'à 50 demandes de devis dans votre zone</div>
<div align="center">géographique <b>gratuitement !</b></div>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="34%">
<tr>
<td>
<tr>
<td style="padding: 0 10px;" align="center" class="responsive-image">
<img src="images/image1.jpg" width="196" alt="" />
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td>
<div style="font-weight: bold; font-size: 16px; color: #64c017;" align="center"><font face="Tahoma">Segmentez les prospects</font></div>
<br />
<div align="center">Ne perdez pas de temps,</div>
<div align="center">choisissez vous même</div>
<div align="center">vos prospects</div>
<br />
<br />
<div style="font-weight: bold; font-size: 16; color: #B9121B;" align="center"><a style="color: #B9121B;" href="#"><u>Devenir partenaire</u></a></div>
</td>
</tr>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="32%">
<tr>
<td>
<tr>
<td style="padding: 0 10px;" align="center" class="responsive-image">
<img src="images/image2.jpg" width="196" height="141" alt=""/>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td>
<div style="font-weight: bold; font-size: 16px; color: #64c017;" align="center"><font face="Tahoma">Analysez votre performance</font></div>
<br />
<div align="center">Maîtrisez votre marché et</div>
<div align="center">votre activité grâce à un</div>
<div align="center">module de statistique</div>
<div align="center">performant</div>
<br />
<div style="font-weight: bold; font-size: 16; color: #B9121B;" align="center"><a style="color: #B9121B;" href="#"><u>Devenir partenaire</u></a></div>
</td>
</tr>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="right" width="34%">
<tr>
<td>
<tr>
<td style="padding: 0 10px;" align="center" class="responsive-image">
<img src="images/image3.jpg" width="196" height="141" alt=""/>
</td>
</tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr>
<td>
<div style="font-weight: bold; font-size: 16px; color: #64c017;" align="center"><font face="Tahoma">Maîtrisez votre budget</font></div>
<br />
<div align="center">Adapté à tous les</div>
<div align="center">budgets, vous dépensez</div>
<div align="center">ce que vous voulez, quand</div>
<div align="center">vous voulez</div>
<br />
<div style="font-weight: bold; font-size: 16; color: #B9121B;" align="center"><a style="color: #B9121B;" href="#"><u>Devenir partenaire</u></a></div>
</td>
</tr>
</td>
</tr>
</table>
<tr>
<td>
<tr>
<td class="footer" bgcolor="#eeeeec" style="color: #eeeeec;" width="800" height="178">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding: 20px 0 100px 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="42" style="text-align: center; padding: 0 30px 0 10px;">
<a href="#">
<img src="images/logoFacebook.png" width="42" height="42" alt="Facebook" border="0" />
</a>
</td>
<td width="42" style="text-align: center; padding: 0 30px 0 10px;">
<a href="#">
<img src="images/logoTwitter.png" width="42" height="42" alt="Twitter" border="0" />
</a>
</td>
<td width="42" style="text-align: center; padding: 0 10px 0 10px;">
<a href="#">
<img src="images/logoGoogle.png" width="42" height="42" alt="Google" border="0" />
</a>
</td>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>
</tr>
</table>
<div style="font-size: 11; color: #b5b6b5;" align="center">Kelip's assurance SAS - Siège social : 42 rue Sergeant Michel Berthet 69009 - Capital social : 6000€</div>
<br />
<div style="font-size: 11; color: #b5b6b5;" align="center">Société en cours d'immatriculation</div>
<div style="font-size: 11; color: #b5b6b5;" align="center"><a style="color: #b5b6b5;" href="#"><u>Si vous ne souhaitez plus recevoir nos emails - merci de vous désinscrire</u></a></div>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Si quelqu'un trouve un problème dans mon code, pourriez-vous m'éclairer svp ?
Merci à vous !
Afficher la suite
