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)
Link to comment
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>

 

Link to comment
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
  • 4 months later...

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
×
×
  • Create New...