Partage
  • Partager sur Facebook
  • Partager sur Twitter

Newsletter HTML - affichage différent

    2 décembre 2021 à 12:44:51

    Hello

    J'ai testé une newsletter et l'affichage n'est pas le même sur gmail (téléphone et pc) que sur outlook ou apple mail.

    Voici les deux problèmes :

    • Le premier bloc avec le texte et la première image est affiché en petit sur gmail.

    • Le footer s'affiche également en petit sur gmail

    Je suis encore novice en HTML. C'est donc compliqué de voir où se situe le problème.

    Je vous remercie par avance pour votre aide :)

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap');
    
        a:hover {
            text-decoration: none !important
        }
    
    .btn-01 {
      background: #fff;
      }
        .btn-01:hover {
            background: #000
            ;
            border-radius: 50px;
             !important
        }
    
        .btn-01:hover a {
            color: #fff !important;
            text-decoration: none;
             !important
        }
    
    </style>
    
    
    <table cellpadding="0" cellspacing="0" style="background:#000; min-width:320px;" width="100%">
    
            <tr>
                <td style="mso-line-height-rule:exactly">
                    <table align="center" cellpadding="0" cellspacing="0" class="w-100p" style="max-width:600px; margin:0 auto;" width="100%">
                        <!-- preview -->
                        
    
                         
    
    
    
    
                            <!-- main -->
                            <tr>
                                <td style="background:#000">
    
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                        
                                            <tr>
                                                <td height="450" style="mso-line-height-rule:exactly" width="15"></td>
                                                <td>
                                                    <table cellpadding="0" cellspacing="0" width="100%">
                                                        
                                                            <tr>
                                                                <td class="pt-30" style="mso-line-height-rule:exactly; padding:80px 0 50px">
                                                                    <table align="center" cellpadding="0" cellspacing="0" style="max-width:470px; width:100% !important; margin:0 auto;" width="470">
                                                                        
                                                                            <tr>
                                                                                <td align="center" class="pb-30" style="mso-line-height-rule:exactly; padding:0 0 40px">
                                                                          
    
    
                                                                                  
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
    
    
                                                                                <!-- TEXTE 1 -->
    
                                                                                <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; padding:0 0 px; font:32px/46px Helvetica, Arial, sans-serif; color:#fff; letter-spacing:0.8px">
                                                                                 <strong> Gaming : faites le bon choix <br> avec CORSAIR
                                                                                    <br>
                                                                                    <tr>
    <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; padding:0 0 50px; font:22px/32px Helvetica, Arial, sans-serif; color:#fff; letter-spacing:0.8px">
                                                                                   <br>Souris, claviers, casques :<br>
                                                                                   nous avons ce qu'il vous faut.
    
     <div style="mso-line-height-rule:exactly">
                                                                                </div>
    
    
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
    
    
    
                                                                                <td style="mso-line-height-rule:exactly">
                                                                                    <table align="center">
                                                                                        
                                                                                            <tr>
                                                                                                <td class="btn-01" style="mso-line-height-rule:exactly; background:#fff text-decoration:none ; transition:all 0.4s ease; font:bold 18px/24px Helvetica, Arial, sans-serif; letter-spacing:0.7px; text-transform:uppercase; border-radius:50px;">
    
    
                                                                                                    <!-- BOUTON -->
    
    
                                                                                                    <a href="mailto:commerce@mobility-company.com" class="fs-16 lh 20 ptb-10" style="color:#000; outline:none; text-decoration:none; transition:all 0.4s ease; display:block; padding:12px 22px; "  target= "_blank">CONTACTEZ-NOUS</a>
                                                                                                </td>
                                                                                            </tr>
                                                                                        
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        
                                                    </table>
                                                </td>
    
                                            </tr>
                                    
                                    </table>
                                </td>
                            </tr>
    
     <!-- IMAGE CORSAIR -->
                            <tr>
                                <td align="center" style="background-color: #000; border: none;">
                                        <img <img <img src="https://i.ibb.co/GRvZZPw/CORSAIR-i-CUE.jpg" alt="CORSAIR-i-CUE" border="0" alt="Des produits gaming exceptionnels." border="0" style="border:none; width:600px; font:700 16px/20px Helvetica, Arial, sans-serif; vertical-align:top" width="600">
    
                                </td>
                            </tr>
    
    <tr> 
    
    
                                                                                <!-- TEXTE 1 -->
    
                                                                                <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; padding:0 0 px; font:24px/35px Helvetica, Arial, sans-serif; color:#000; background:#fff; letter-spacing:0.8px">
                                                                                 <br>
                                                                                 <strong> CORSAIR, c'est quoi ?
                                                                                    <tr>
    <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; background:#fff; padding:0 0 50px; font:16px/23px Helvetica, Arial, sans-serif; color:#000 ; letter-spacing:0.8px">
                                                                                   <br>Leader mondial dans le domaine de la conception <br>et de la fabrication d’équipements et de technologies <br>hautes performances.
                                                                                   
    
     <div style="mso-line-height-rule:exactly">
                                                                                </div>
    
    
                                                                                </td>
                                                                            </tr>
                                                                            
                     <tr>
    
    
                                                                                <!-- TEXTE 1 -->
    
                                                                                <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; padding:0 0 px; background:#fff; font:24px/35px Helvetica, Arial, sans-serif; color:#000; letter-spacing:0.8px">
                                                                            
                                                                                 <strong> Pour qui ?
                                                                                    <tr>
    <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; padding:0 0 50px; background:#fff; font:16px/23px Helvetica, Arial, sans-serif; color:#000 ; letter-spacing:0.8px">
                                                                                   <br>Pour les joueurs. <br>Pour les créateurs de contenu. <br> Pour les passionnés d’informatique.<br>
                                                                                   
    
     <div style="mso-line-height-rule:exactly">
                                                                                </div>
    
    
                                                                                </td>
                                                                            </tr>                                                       
    <table cellpadding="0" cellspacing="0" style="background:#000000; min-width:320px;" width="100%">
        
            <tr>
                <td style="mso-line-height-rule:exactly">
                    <table align="center" cellpadding="0" cellspacing="0" class="w-100p" style="max-width:600px; margin:0 auto;" width="600">
                        <!-- preview -->
                        
    <tr>
                                                                                <!-- TEXTE 1 -->
                            
                                                                                <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; padding:0 0 px; font:32px/46px Helvetica, Arial, sans-serif; color:#fff; letter-spacing:0.8px">
                                                                                <br>
                                                                                 <strong> LES CASQUES
                                                                                    <br><br>
                                                                                    
                                                                                    
                                                                                <table align="center" cellpadding="0" cellspacing="0" class="w-100p" style="max-width:600px; margin:0 auto;" width="600">
           <img src="https://i.ibb.co/qkRFmtt/CASQUES-min.jpg" alt="CASQUES-min" border="0" style="border:none; width:600px;&gt;
              
            &lt;/tr&gt;
    &lt;/table&gt;
                                                                                    
                                                                                    
                                                                                    
                                                                                     &lt;!-- main --&gt;
                            &lt;tr&gt;
                                &lt;style=" background:#0c0c0c"="">
                                           <table cellpadding="0" cellspacing="0" style="background:#000000; min-width:320px;" width="100%">
        
            <tr>
                <td style="mso-line-height-rule:exactly">
                    <table align="center" cellpadding="0" cellspacing="0" class="w-100p" style="max-width:600px; margin:0 auto;" width="600">
                        <!-- preview -->
                        
    
                                                                                <!-- TEXTE 1 -->
    
                                                                                <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; padding:0 0 px; font:32px/46px Helvetica, Arial, sans-serif; color:#fff; letter-spacing:0.8px">
                                                                                <br>
                                                                                 <strong> LES CLAVIERS
                                                                                    <br><br>
                                                                                    
                                                                                    
                                                                                <table align="center" cellpadding="0" cellspacing="0" class="w-100p" style="max-width:600px; margin:0 auto;" width="600">
            <img src="https://i.ibb.co/4m7KnRN/CLAVIERS-min.jpg" alt="CLAVIERS-min" border="0" style="border:none; width:600px;&gt;
              
            &lt;/tr&gt;
    &lt;/table&gt;
                                                                                    
                                                                                    
                                                                                    
                                                                                     &lt;!-- main --&gt;
                            &lt;tr&gt;
                                &lt;td style=" background:#0c0c0c"="">
                                           <table cellpadding="0" cellspacing="0" style="background:#000000; min-width:320px;" width="100%">
        
            <tr>
                <td style="mso-line-height-rule:exactly">
                    <table align="center" cellpadding="0" cellspacing="0" class="w-100p" style="max-width:600px; margin:0 auto;" width="600">
                        <!-- preview -->
                        
    
                                                                                <!-- TEXTE 1 -->
    
                                                                                <td align="center" class="pb-30 fs-16 lh-20" style="mso-line-height-rule:exactly; padding:0 0 px; font:32px/46px Helvetica, Arial, sans-serif; color:#fff; letter-spacing:0.8px">
                                                                                <br>
                                                                                 <strong> LES SOURIS
                                                                                    <br><br>
                                                                                    
                                                                                    
                                                                                <table align="center" cellpadding="0" cellspacing="0" class="w-100p" style="max-width:600px; margin:0 auto;" width="600">
            <img src="https://i.ibb.co/DWd9ZJr/SOURIS-min.jpg" alt="SOURIS-min" border="0" style="border:none; width:600px;&gt;
              
            &lt;/tr&gt;
    &lt;/table&gt;
                                                                                    
                                                                                    
                                                                                    
                                                                                     &lt;!-- main --&gt;
                            &lt;tr&gt;
                                &lt;td style=" background:#000 »=«  »>
                                
                                
    
    
    
            <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" style="line-height: inherit; vertical-align: middle; border-collapse: collapse;" valign="top">
    
                    <tr style="line-height: inherit; vertical-align: top; border-collapse: collapse; background-color:#d93914;" align="center">
            <td class="MsoNormal" align="center" style="vertical-align:middle;width:100%;color:white;display: inline-block;font-size:16px;text-align: center;text-decoration: none;line-height:60px;-webkit-text-size-adjust:none;font-family:sans-serif, Montserrat;text-transform:uppercase;font-weight:700;letter-spacing:1px; margin-bottom: 0px; margin-top: 0px">NOUS CONTACTER<br>
                        </td></tr>
    
    
                <tr style="line-height: inherit; vertical-align: top; border-collapse: collapse;">
    
    
    
                    <td style="line-height: inherit; vertical-align: top; border-collapse: collapse; padding-bottom: 40px; background-color:#d93914;" align="center" class="pb-40">
                        <table border="0" cellspacing="0" cellpadding="0" style="line-height: inherit; vertical-align: middle; border-collapse: collapse;">
    
    
                            <!-- réseaux sociaux  -->
    
                            <tr style="line-height: inherit; vertical-align: middle; border-collapse: collapse;" align="center">
    
    
                                <!-- Lien téléphone  -->
                                <td class="img" width="26" style="vertical-align: top; border-collapse: collapse; font-size: 0pt; line-height: 0pt; text-align: center; padding-right: 40px;" align="center" valign="top">
    
                                    <a href="tel:0170978330"><img src="https://mcusercontent.com/c8c8056f74fa67ec039637f44/images/ec8ddc94-41c2-37a0-e49f-1aabfa8cbabb.png" width="30" border="0" alt="" style="line-height: inherit;"></a>
                                </td>
    
    
                             
                                <!-- Lien Mail  -->
    
                                <td class="img" width="26" style="vertical-align: top; border-collapse: collapse; font-size: 0pt; line-height: 0pt; text-align: center; padding-right: 40px;" align="center" valign="top">
    
                                    <a href="mailto:commerce@mobility-company.com"><img src="https://mcusercontent.com/c8c8056f74fa67ec039637f44/images/956687eb-06f4-e4fc-2046-bc176a8b56f1.png" width="30" border="0" alt="" style="line-height: inherit;"></a>
                                </td>
    
    
    
                                <!-- Lien Internet -->
    
                                <td class="img" width="26" style="vertical-align: top; border-collapse: collapse; font-size: 0pt; line-height: 0pt; text-align: left; padding-right: 40px;" align="left" valign="top">
    
                                    <a href="https://www.mobility-company.com/marques/"><img src="https://mcusercontent.com/c8c8056f74fa67ec039637f44/images/12bc890e-00a9-840d-5c69-352d24f45863.png" width="30" border="0" alt="" style="line-height: inherit;"></a>
                                </td>
    
    
    
    
    
    
                                <!-- Lien LinkedIn  -->
    
    
                                <td class="img" width="29" style="vertical-align: top; border-collapse: collapse; font-size: 0pt; line-height: 0pt; text-align: left;" align="left" valign="top"><a href="https://www.linkedin.com/company/1263186/admin/" target="_blank" style="line-height: inherit;"><img src="https://mcusercontent.com/c8c8056f74fa67ec039637f44/images/b37f2b87-9752-5651-c168-8d1c4ca6ad84.png" width="30" border="0" alt="" style="line-height: inherit;"></a></td>
    
    
                            </tr>
    
    
                        </table>
                    </td>
                </tr>
            </table>
     
    
        <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" style="line-height: inherit; vertical-align: top; border-collapse: collapse;" valign="top">
    
            <tr style="line-height: inherit; vertical-align: top; border-collapse: collapse; background-color: #2E2E2E;" valign="top">
                <td class="text-10 lgray lh-20 ltsp-15 pb-40" style="vertical-align: top; border-collapse: collapse; padding-bottom: 30px; font-size: 10px; font-family: Verdana, Arial, sans-serif; text-align: center; color: #F9F7F5; line-height: 20px; letter-spacing: 1.5px; min-width: auto !important; padding-top: 30px" align="center" valign="top">
    
                    Ajoutez-nous à votre carnet d'adresses :<br style="cellpadding=&quot;0&quot;" cellspacing="0"> <a style="text-decorations:none; color:inherit;">commerce@mobility-company.com </a> <br style="line-height: inherit;"><br style="line-height: inherit;">Mobility <br style="line-height: inherit;">5 Avenue de Verdun, <br style="line-height: inherit;"> 94200 Ivry-sur-Seine, France </td>
    
    
            </tr>
        </table>
    
    
    
    
        <tr style="line-height: inherit; border-collapse: collapse; display: table; width: 100%;">
    
    
            <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" style="line-height: inherit; vertical-align: top; border-collapse: collapse;" valign="top">
    
                <td class="img" width="29" style="vertical-align: top; border-collapse: collapse; font-size: 0pt; line-height: 0pt; text-align: center; padding-bottom: 30px; background-color: #2E2E2E;" align="center" valign="top"><img src="https://mcusercontent.com/c8c8056f74fa67ec039637f44/images/2448a114-fb94-a040-89a2-328518fd0c7c.png" width="100" border="0" alt="" style="line-height: inherit;"></td>
            </table>
        </tr>
    
    
                                           
    
    
    • Partager sur Facebook
    • Partager sur Twitter

    Newsletter HTML - affichage différent

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown