Как сверстать адаптивного письма?

Question

[andy301086]

Есть письмо. Картинка а внутри нее текст. Можно ли такой шаблон сверстать адаптивно и под браузеры mozila, safary, opera, chrome? Заранее спасибо за советы. Возможно есть неплохие ресурсы))

Comments

[Максим Тимофеев]

Картинка а внутри нее текст??? Картинка на фоне блока в котором текст?

Answer 1

[htmluser]

Есть правила для верстки электронных писем. Эти правила крайне жесткие, а возможности верстки сильно ограничены. Верстать необходимо ИСКЛЮЧИТЕЛЬНО на таблицах. Пример выше показывает незнание отвечающего материала.

Ответ на ваш вопрос — скорее всего можно. Скорее всего, из-за того, что не понятно какая именно картинка является фоном.

Изучите на досуге:

https://habrahabr.ru/post/252279/
https://habrahabr.ru/company/pechkin/blog/255819/

Answer 2

[Максим Тимофеев]

<div style="width:100%; min-height:300px; background: #fff url(урл/картинки) no-repeat 50% 50%; background-size:cover;">
<p>Текст</p>
</div>

В чем проблема?

Comments

[Сергей Горячев]

background: #fff url(урл/картинки) no-repeat 50% 50%

Вы свой код проверяли на Litmus или Email on Acid? Проверьте, сильно удивитесь, что он криво работает.

[Максим Тимофеев]

Sergey Goryachev: Вы писали "под браузеры mozila, safary, opera, chrome". При чем тут email web клиенты? Для них таблицами верстать надо. Они вообще половину css не отображают корректно. Причем каждый имеет свою проблему. Поиск Вам в помощь: https://yandex.ru/search/?text=email%20шаблоны%20h...

[Сергей Горячев]

Максим Тимофеев: я не автор поста. А автор поста видимо просто не в теме, что письма верстаются не под браузеры, а почтовые сервисы и клиенты. И все равно код криво отработается в gmail,

[Сергей Горячев]

Максим Тимофеев: у меня лично с версткой писем все отлично, я их 3 года верстал для крупнейшего игрока на рынке email-рассылок ;)

[Максим Тимофеев]

Sergey Goryachev: Естественно. Я и не ожидал другого. Для писем картинка кладется в ячейку таблицы с width=100%. Дальше по ситуации. Есть отрицательные маргины, есть float, есть много вариантов, все они есть в поиске. Ссылка выше. Приглашаю автора ее изучить.

Answer 3

[HamSter]

1
2
+ на Хабрахабр уйма уже пособий по кросспочтовым и адаптивным письмам