Bonjour,
J'ai réalisé un email responsive, il s'affiche correctement sur à peu près tout sauf sur Outlook où la largeur de 620 px ne semble pas respectée : il manque des pixels à gauche et à droite de l'email.
Ci-dessous le début du code. Quelqu'un aurait-il une idée ?
Merci beaucoup !
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offre spéciale Lycée 2019, des solutions numériques fiables, performantes et interactives</title>
<!--CSS-->
<style type="text/css">.outer,.webkit{max-width:620px}.h1,.h2{font-weight:700;margin-bottom:5px;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}.h1,.h2,.one-column .contents,.one-column p,body,table{font-family:Arial,sans-serif}*,.h1,.h2,.one-column .contents,.one-column p,body{-webkit-font-smoothing:antialiased}.three-column .column,.two-column .column{vertical-align:top;width:100%;display:inline-block}body{margin:0;padding:0;min-width:100%;background-color:#efeff1}.three-column,p{padding-bottom:10px}.three-column,.three-column .text,.two-column .text{padding-top:10px}table{border-spacing:0;color:#333}img{border:0}.wrapper{width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.outer{margin:0 auto;width:100%}.full-width-image img{width:100%;max-width:620px;height:auto}.inner{padding:10px}p{margin:0}.h1{font-size:21px;margin-top:16px}.h2{font-size:18px;margin-top:10px}.one-column .contents{text-align:left}.one-column p{font-size:14px;margin-bottom:10px}.two-column{text-align:center;font-size:0}.two-column .column{max-width:300px}.contents{width:100%}.two-column .contents{font-size:14px;text-align:left}.two-column img{width:100%;max-width:280px;height:auto}.three-column{text-align:center;font-size:0}.three-column .column{max-width:200px}.three-column .contents{font-size:14px;text-align:center}.three-column img{width:100%;max-width:180px;height:auto}.img-align-vertical img{display:inline-block;vertical-align:middle}</style>
<!--[if mso]>
<style type="text/css">
table{border-collapse:collapse!important}
.fallback-font{font-family:Arial,sans-serif!important}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
</head>
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#efeff1;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#efeff1;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#efeff1;" bgcolor="#efeff1">
<tr>
<td width="100%">
<div class="webkit" style="max-width:620px;margin:0 auto;">
<!--[if (gte mso 9)|(IE)]>
<table width="620" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family: Calibri, sans-serif;color:#333333;" >
<tr>
<td >
<![endif]-->
<table class="outer" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family: Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:620px;" bgcolor="#efeff1">
<tr>
<td align="center" style="font-family: Arial, sans-serif;font-size: 13px; color: #006DA4; padding: 10px 0 5px 0; text-align:center; font-weight:bold;"> Offre spéciale Lycée 2019, des solutions numériques fiables, performantes et interactives </td>
</tr>
J'ai réalisé un email responsive, il s'affiche correctement sur à peu près tout sauf sur Outlook où la largeur de 620 px ne semble pas respectée : il manque des pixels à gauche et à droite de l'email.
Ci-dessous le début du code. Quelqu'un aurait-il une idée ?
Merci beaucoup !
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offre spéciale Lycée 2019, des solutions numériques fiables, performantes et interactives</title>
<!--CSS-->
<style type="text/css">.outer,.webkit{max-width:620px}.h1,.h2{font-weight:700;margin-bottom:5px;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}.h1,.h2,.one-column .contents,.one-column p,body,table{font-family:Arial,sans-serif}*,.h1,.h2,.one-column .contents,.one-column p,body{-webkit-font-smoothing:antialiased}.three-column .column,.two-column .column{vertical-align:top;width:100%;display:inline-block}body{margin:0;padding:0;min-width:100%;background-color:#efeff1}.three-column,p{padding-bottom:10px}.three-column,.three-column .text,.two-column .text{padding-top:10px}table{border-spacing:0;color:#333}img{border:0}.wrapper{width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.outer{margin:0 auto;width:100%}.full-width-image img{width:100%;max-width:620px;height:auto}.inner{padding:10px}p{margin:0}.h1{font-size:21px;margin-top:16px}.h2{font-size:18px;margin-top:10px}.one-column .contents{text-align:left}.one-column p{font-size:14px;margin-bottom:10px}.two-column{text-align:center;font-size:0}.two-column .column{max-width:300px}.contents{width:100%}.two-column .contents{font-size:14px;text-align:left}.two-column img{width:100%;max-width:280px;height:auto}.three-column{text-align:center;font-size:0}.three-column .column{max-width:200px}.three-column .contents{font-size:14px;text-align:center}.three-column img{width:100%;max-width:180px;height:auto}.img-align-vertical img{display:inline-block;vertical-align:middle}</style>
<!--[if mso]>
<style type="text/css">
table{border-collapse:collapse!important}
.fallback-font{font-family:Arial,sans-serif!important}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
</head>
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#efeff1;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#efeff1;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#efeff1;" bgcolor="#efeff1">
<tr>
<td width="100%">
<div class="webkit" style="max-width:620px;margin:0 auto;">
<!--[if (gte mso 9)|(IE)]>
<table width="620" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family: Calibri, sans-serif;color:#333333;" >
<tr>
<td >
<![endif]-->
<table class="outer" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family: Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:620px;" bgcolor="#efeff1">
<tr>
<td align="center" style="font-family: Arial, sans-serif;font-size: 13px; color: #006DA4; padding: 10px 0 5px 0; text-align:center; font-weight:bold;"> Offre spéciale Lycée 2019, des solutions numériques fiables, performantes et interactives </td>
</tr>