Renvoyer une cellule à la ligne dans une table pour une newsletter

Hello la zone,

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 :
image
en gros un renvoi à la ligne de la dernière colonne.

Sauf que j’ai aucune idée de comment faire ça :confused: 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.

Est-ce que quelqu’un pourrait m’aiguiller ?

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)

Ce que tu cherches c’est « responsive html table » si tu t’aventures sur Google.

https://www.webcarpenter.com/blog/99-8-Responsive-Data-Tables-that-Look-Great-on-Mobile-Devices

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.

Bonne chance !

Merci à tous.
Au final, aux vues des ressources et de ce que vous m’avez dit, j’ai simplifié la présentation :


Désormais tout tient sur une seule ligne qui se wrappe comme une grande.

1 J'aime

Merci pour les astuces ! C’est souvent la galère ce genre de choses mais vous m’avez donnez des bonnes idées pour éviter le problème :wink:

1 J'aime