Создал html-шаблон письма. Почему при пересылке он ломается?

Question

[Артём]

Как я понимаю почтовые клиенты где то что-то ломают.Но где?
Вот на ПК как выглядит

После отправки через email


Код: https://jsfiddle.net/foowee800/81pqds3y/

Comments

[Rustam Bainazarov]

Мне не так давно помогло оное:
https://sendpulse.com/ru/blog/html-coding-for-email

Так что желаю удачи :))

Ну и плюс у вас ошибки в CSS есть.

Answer 1

[Никита Кит]

1) Далеко не все почтовики поддерживают медиазапросы. Точнее почти никакие. Примерно полгода назад у меня была задача всерстать письмо адаптивно - пришлось перешерстить много инфы и тестить какие почтовики оставляют style на месте, какие атрибуты они не трогают к которым я мог бы привязать селекторы медиазапросов. Пришлось к галпу свой модуль дописывать, выносящий все стили медиазапросов и заменяющий все атрибуты class на те, что почтовики не трогают, и то я покрыл адаптивом только половину требуемых клиентов
2) Все что может быть заинлайнено, должно быть заинлайнено.
Попробуй собрать вот на этом бойлерплейте, он меня с вёрсткой рассылок часто спасает

Answer 2

[Andrei Alisenok]

Я отправил, нормально отображается...где едет? outlook ?
Ошибки в css !!!

td.polosa1 {
            size: 15px;
            size: 300px;
            position: absolute;
            border: none;
            align = "center";  - что это тут делает?
            size = "25px"; - это что такое?
        }

Comments

[Артём]

отправлял в яндекс.
Как я понял разные почтовики реагируют по разному. Неважно. серавно пришлось переделать.

[Andrei Alisenok]

foowee800, в яндексе поехало! Что бы выглядело все хорошо в разных браузерах и клиентах, как я понял есть два пути....использовать фреймворк или делать по готовому шаблону!