PS 1.7.6.8 Mail à l'envers sur mobile - RESOLU = problème de template mail

gouna · October 22, 2021

Bonjour,

Je suis confronté à un problème assez ... retournant ....

Certains mails de ma boutiques sont tout simplement retournée de 180 degrés, et affichés en minuscule, uniquement sur mobile (j'utilise outlook).

Cela ne concerne pas tous les mails, par exemple les mails de confirmation de commande ne sont pas affectés, mais les mails de relance pour panier abandonné oui.

Sur PC : cela semble ok (bon, à revoir les règles css car les alignements sont mauvais !)

Sur mobile, la cata totale !! :

Avez-vous déjà eu ce genre de problème ?

Cordialement.

Edited October 22, 2021 by gouna
résolu (see edit history)

gouna · October 22, 2021

A prioris, les mails issus de modules tiers (Ask about product) et les mails issus du module ps_reminder (relance client) sont concernés.

Voici par exemple le fichier mail html du module Ask about product :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>Message from {shop_name}</title>

    <style>
        /****** responsive ********/
        @media only screen and (max-width: 300px) {
            body {
                width: 218px !important;
                margin: auto !important;
            }

            .table {
                width: 195px !important;
                margin: auto !important;
            }

            .logo, .titleblock, .linkbelow, .box, .footer, .space_footer {
                width: auto !important;
                display: block !important;
            }

            span.title {
                font-size: 20px !important;
                line-height: 23px !important
            }

            span.subtitle {
                font-size: 14px !important;
                line-height: 18px !important;
                padding-top: 10px !important;
                display: block !important;
            }

            td.box p {
                font-size: 12px !important;
                font-weight: bold !important;
            }

            .table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr {
                display: block !important;
            }

            .table-recap {
                width: 200px !important;
            }

            .table-recap tr td, .conf_body td {
                text-align: center !important;
            }

            .address {
                display: block !important;
                margin-bottom: 10px !important;
            }

            .space_address {
                display: none !important;
            }
        }

        @media only screen and (min-width: 301px) and (max-width: 500px) {
            body {
                width: 308px !important;
                margin: auto !important;
            }

            .table {
                width: 285px !important;
                margin: auto !important;
            }

            .logo, .titleblock, .linkbelow, .box, .footer, .space_footer {
                width: auto !important;
                display: block !important;
            }

            .table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr {
                display: block !important;
            }

            .table-recap {
                width: 293px !important;
            }

            .table-recap tr td, .conf_body td {
                text-align: center !important;
            }
        }

        @media only screen and (min-width: 501px) and (max-width: 768px) {
            body {
                width: 478px !important;
                margin: auto !important;
            }

            .table {
                width: 450px !important;
                margin: auto !important;
            }

            .logo, .titleblock, .linkbelow, .box, .footer, .space_footer {
                width: auto !important;
                display: block !important;
            }
        }

        /* Mobile */
        @media only screen and (max-device-width: 480px) {
            body {
                width: 308px !important;
                margin: auto !important;
            }

            .table {
                width: 285px;
                margin: auto !important;
            }

            .logo, .titleblock, .linkbelow, .box, .footer, .space_footer {
                width: auto !important;
                display: block !important;
            }

            .table-recap {
                width: 285px !important;
            }

            .table-recap tr td, .conf_body td {
                text-align: center !important;
            }

            .address {
                display: block !important;
                margin-bottom: 10px !important;
            }

            .space_address {
                display: none !important;
            }
        }
    </style>

</head>
<body style="background-color:#fff;width:650px;font-family:Open-sans, sans-serif;color:#555454;font-size:13px;line-height:18px;margin:auto">
<table class="table table-mail"
       style="width:100%;margin-top:10px;-moz-box-shadow:0 0 5px #afafaf;-webkit-box-shadow:0 0 5px #afafaf;-o-box-shadow:0 0 5px #afafaf;box-shadow:0 0 5px #afafaf;filter:progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5)">
    <tr>
        <td class="space" style="width:20px;border:none;padding:7px 0">&nbsp;</td>
        <td align="center" style="border:none;padding:7px 0">
            <table class="table" style="width:100%;background-color:#fff">
                <tr>
                    <td align="center" class="logo" style="border-bottom:4px solid #333!important;border:none;padding:7px 0">
                        <a title="{shop_name}" href="{shop_url}" style="color:#337ff1">
                            <img src="{shop_logo}" alt="{shop_name}"/>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td align="center" class="titleblock" style="border:none;padding:7px 0">
                        <span class="title" style="font-weight:500;font-size:28px;text-transform:uppercase;line-height:33px">Hi,</span><br/>
                    </td>
                </tr>
                <tr>
                    <td class="space_footer" style="padding:0!important;border:none">&nbsp;</td>
                </tr>
                <tr>
                    <td class="box" style="background-color:#fbfbfb;border:1px solid #d6d4d4!important;padding:10px!important">
                        <p style="margin:3px 0 7px;text-transform:uppercase;font-weight:500;font-size:18px;border-bottom:1px solid #d6d4d4!important;padding-bottom:10px">
                            New inquiry about <a href="{productLink}" target="_blank"><strong>{product}</strong></a></p><br/>Phone: {phone}<br/>Email: {customerMail}<br/><br/>
                            <blockquote>
                                {question}
                            </blockquote>
                    </td>
                </tr>

                <tr>
                    <td class="space_footer" style="padding:0!important;border:none">&nbsp;</td>
                </tr>
                <tr>
                    <td class="footer" style="border-top:4px solid #333!important;border:none;padding:7px 0">
                        <span><a href="{shop_url}" style="color:#337ff1">{shop_name}</a></span>
                    </td>
                </tr>
            </table>
        </td>
        <td class="space" style="width:20px;border:none;padding:7px 0">&nbsp;</td>
    </tr>
</table>
</body>
</html>

gouna · October 22, 2021

Enfait c'est OK, les templates des mails sont trop vieux et il y a des règles pour outlook dans les nouveaux templates.

J'ai juste repris le template de base des mails de commande, c'est tout bon maintenant !

yurda · March 16, 2022

Bonjour,

j'ai un probleme pour la table des produits du mail order_confirmation. Elle est pas bien en format mobile. Est-ce qu'on peut modifier quelque chose pour l'adapter au petit format.

Merci!

Mediacom87 · March 16, 2022

Il y a 2 heures, yurda a dit :

Bonjour,

j'ai un probleme pour la table des produits du mail order_confirmation. Elle est pas bien en format mobile. Est-ce qu'on peut modifier quelque chose pour l'adapter au petit format.

Merci!

yurda · March 16, 2022

OK, j'ai compris!

Desolé!

Merci!

Sign In

PS 1.7.6.8 Mail à l'envers sur mobile - RESOLU = problème de template mail

Recommended Posts

gouna

Link to comment

Share on other sites

gouna

Link to comment

Share on other sites

gouna

Link to comment

Share on other sites

yurda

Link to comment

Share on other sites

Mediacom87

Link to comment

Share on other sites

yurda

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com