[Problème] Ajouter une balise meta dans acymailing pour une newsletter responsive

[marsamandes]

Bonjour

je souhaite envoyer une newsletter avec acymailing qui serait responsive (adaptable aux différents formats portable, tablettes...), mais autant je peux ajouter les @media dans le template comme prévu, autant je ne vois ni ne sais comment ajouter la balise <meta name="viewport" content="width=device-width, initial-scale=1.0" /> importante pour ce genre de newsletter. Quelqu'un sait il comment faire ?

merci à vous

[kursus]

Re : Ajouter une balise meta dans acymailing pour une newsletter responsive

Salut,

Je suppose que le meta viewport a été désactivé car certains blackberry ne le supportent pas et affichent une newsletter blanche.

Si tu y tiens absolument regarde dans plugins/acymailing/template/template.php et fait une recherche sur viewport, mais fait des tests sur BB avant.

[marsamandes]

Re : Ajouter une balise meta dans acymailing pour une newsletter responsive

Salut,

Je suppose que le meta viewport a été désactivé car certains blackberry ne le supportent pas et affichent une newsletter blanche.

Si tu y tiens absolument regarde dans plugins/acymailing/template/template.php et fait une recherche sur viewport, mais fait des tests sur BB avant.

alors pour info cela pourra en interreser certains elle intégrée d'office depuis les dernières versions merci de ton retour et désolé pour le dérangement

[marsamandes]

Re : Ajouter une balise meta dans acymailing pour une newsletter responsive

En fait je profite de ce post car il y a aussi un souci que je rencontre si dans la partie css je ne mets qu'un style media

 @media only screen and (max-width: 650px) 
        {
            h1 { margin-bottom:20px !important; }
            h1 span, *[class].nbsp { font-size:45px !important;line-height:40px !important;  }
            h1 img { width:100% !important;padding-left:0 !important;margin-left:0 !important; }
            
            *[class].small img { width:92% !important; }
            
            /*.img img { width:100%; }*/
            
            *[id]#article *[class].one, *[id]#article *[class].para p:first-child { margin-top:0 !important;padding-top:15px !important;}
            
            *[class].small { width:40% !important; }
            *[class].small img { width:95% !important; }
            *[id]#article h3 { width:60% !important;font-size:18px !important;margin-left:40% !important; }
            
            *[id]#article *[class].para { margin-left:0 !important;width:100%!important;float:none !important;display:block!important;clear:both; }
            
            *[id]#table-infos *[class].info, *[id]#table-agenda *[class].agenda { width:100% !important;margin:0 !important; }
        }
        
        @media only screen and (max-width: 480px)
        {
            h1 span, *[class].nbsp { font-size:30px !important;line-height:30px !important;  }
        }
        
        @media only screen and (max-width: 350px)
        {
            h1 span { font-size:30px !important;line-height:25px !important; }
            
            *[class].nbsp { display:none; }
            
            *[class].table-partners { width:100% !important; }
            *[class].table-partners *[class].top_liste { padding:0 10px !important; }
            *[class].table-partners *[class].top_liste.first { padding-left:0 !important; }
            *[class].table-partners *[class].top_liste.last { padding-right:0 !important; }
            
        }
        
        /* Illisibilité */
        @media only screen and (max-width: 250px)
        {
            *[class].small img { width:100% !important; }
            *[class].small, *[id]#article h3, *[id]#article .para { display:block !important;width:100% !important;float:none !important;margin:0 !important; }
            
            /* Centre btn */
            *[class].btn { width:auto !important;text-align:center !important;float:none !important;margin:0 auto !important; }
        }

alors pas de souci si j'ai le malheur d'en mettre d'autres plus rien n'est envoyé dans le mail :

 @media only screen and (max-width: 650px) 
        {
            h1 { margin-bottom:20px !important; }
            h1 span, *[class].nbsp { font-size:45px !important;line-height:40px !important;  }
            h1 img { width:100% !important;padding-left:0 !important;margin-left:0 !important; }
            
            *[class].small img { width:92% !important; }
            
            /*.img img { width:100%; }*/
            
            *[id]#article *[class].one, *[id]#article *[class].para p:first-child { margin-top:0 !important;padding-top:15px !important;}
            
            *[class].small { width:40% !important; }
            *[class].small img { width:95% !important; }
            *[id]#article h3 { width:60% !important;font-size:18px !important;margin-left:40% !important; }
            
            *[id]#article *[class].para { margin-left:0 !important;width:100%!important;float:none !important;display:block!important;clear:both; }
            
            *[id]#table-infos *[class].info, *[id]#table-agenda *[class].agenda { width:100% !important;margin:0 !important; }
        }
        
        @media only screen and (max-width: 480px)
        {
            h1 span, *[class].nbsp { font-size:30px !important;line-height:30px !important;  }
        }
        
        @media only screen and (max-width: 350px)
        {
            h1 span { font-size:30px !important;line-height:25px !important; }
            
            *[class].nbsp { display:none; }
            
            *[class].table-partners { width:100% !important; }
            *[class].table-partners *[class].top_liste { padding:0 10px !important; }
            *[class].table-partners *[class].top_liste.first { padding-left:0 !important; }
            *[class].table-partners *[class].top_liste.last { padding-right:0 !important; }
            
        }
        
        /* Illisibilité */
        @media only screen and (max-width: 250px)
        {
            *[class].small img { width:100% !important; }
            *[class].small, *[id]#article h3, *[id]#article .para { display:block !important;width:100% !important;float:none !important;margin:0 !important; }
            
            /* Centre btn */
            *[class].btn { width:auto !important;text-align:center !important;float:none !important;margin:0 auto !important; }
        }

Quelqu'un a t'il eu ce souci et comment l'a t il résolu svp ?