J’ai dans l’idée d’envoyer une newsletter chaque semaine à ma famille étendu avec les événements (anniversaire, date de mariage, etc) de la semaine à venir. Je bute sur la réalisation en HTML de l’email, vu que ça fait un bail que j’en ai pas fait et que je suis pas doué en la matière. J’ai choppé une template que j’ai un peu changé, actuellement ça donne ça :
Mon but c’est que ça marche bien sur smartphone aussi, et j’aimerai faire la chose suivante quand l’écran est petit :
en gros un renvoi à la ligne de la dernière colonne.
Sauf que j’ai aucune idée de comment faire ça en regardant sur StackOverflow ça parle de display: table-row avec media queries, mais je n’arrive pas à obtenir ce que je veux. Le code est dispo sur Codepen.
Je ne connais pas bien le sujet, et je réponds pas à la question (gzstyle), mais aux dires de mes techs à l’époque, c’est un cauchemar pour faire du mailing joli qui marche partout, avec en particulier l’affichage mobile (faut faire du hack de vieux html/js). Bref, le plus simple est souvent : soit faire du texte brut (ce que je préfère perso), soit faire une image (beurk)
Des éléments de réponses qui correspondent à ton besoin ici aussi :
Et comme mentionné dans des commentaires, si tu es prêt à y remettre un peu de temps regarde du côté de Bootstrap et du mode « grid » plutôt que de faire une table.
Je plussoie l’avertissemtn de @kaneloon sur le support CSS un peu random suivant le client mail.
Si tu ne vises que GMail, tu vas surement pouvoir trouver une solution, mais sinon, c’est difficile faire des choses subtiles (coucou les webmails Orange et autres). Bootstrap peut surement t’aider à avoir le design que tu veux dans un navigateur normal, mais l’inclusion dans un courriel peut être impossible. La dernière fois que j’ai fait ça, il fallait inliner la CSS dans le mail HTML et c’était pas fifou à faire. Suivant ton environnement de dev, ça peut être plus ou moins facile d’itérer sur ces questions.
en regardant sur StackOverflow ça parle de display: table-row avec media queries, mais je n’arrive pas à obtenir ce que je veux. Le code est dispo sur Codepen.
