Jump to content

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


Recommended Posts

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 !)

604005330_okpc.jpg.01e919d5b39a959bc1a340f5a788b0dc.jpg

Sur mobile, la cata totale !! :

196573215_pbmobile.jpg.a43cc7a03cd415121db15a0980b778b1.jpg

 

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

Cordialement.

 

 

Edited by gouna
résolu (see edit history)

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

  • gouna changed the title to PS 1.7.6.8 Mail à l'envers sur mobile - RESOLU = problème de template mail

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More