Как я могу сделать шаблон визуализации в Outlook с Sendgrid? - PullRequest
Новая
       82

Как я могу сделать шаблон визуализации в Outlook с Sendgrid?

0 голосов
/ 12 марта 2020

Я создаю почтовый шаблон с sendGrid для учетной записи @hotmail.com , но когда я проверяю электронную почту, у меня не тот шаблон, который разработан. Вот что я сделал: what I went

Результат: what I get

Мой HTML код: 

<td colspan="5" style="border-left: 20px solid pink;border-right: 20px pink solid ;padding : 0 30px; font-size:13px; padding-bottom : 20px">
    <div style="margin-top:20px; display : flex; font-size : 12px">
        <div style="background: pink; flex: 1; margin-right: 5px; width : 130px; height : 50px; text-align : center">
            <p style="margin : 0; margin-top : 10px">TEST</p>
            <p style="margin : 0">TEST</p>
        </div>
        <div style="width : 130px; height : 50px; text-align : center; background: pink; flex: 1; margin-right: 5px;">
            <p style="margin : 0; margin-top : 10px">TEST</p>
            <p style="margin : 0">TEST</p>
        </div>
        <div style="width : 240px; height : 50px; text-align : center; background: pink; flex: 2;line-height:50px;">
            TEST TEST TEST TEST TEST TEST TEST
        </div>
    </div>
</td>

1 Ответ

0 голосов
/ 16 марта 2020

Электронная почта довольно отсталая. Вы обнаружите, что flex не поддерживается широко: https://www.caniemail.com/search/?s=flex

Базовая c структура электронного письма должна по-прежнему (к сожалению) основываться на таблице с использованием отображения по умолчанию (т.е. don не меняй его на изгиб). Ищите подход «гибридная электронная почта» для структуры таблицы.

Кроме того, для правильного отображения длинных таблиц на мобильных устройствах необходимо учитывать грубую максимальную ширину 320 пикселей, поэтому параметры width:240px невелики. Лучше всего работать в процентах или переделывать таблицу.

...