Есть ли способ сохранить элементы заголовка на их «отзывчивой позиции»? - PullRequest
Новая
       50

Есть ли способ сохранить элементы заголовка на их «отзывчивой позиции»?

0 голосов
/ 06 мая 2019

Я пытаюсь создать заголовок для почтовой рассылки, которая будет отправлена ​​на Mailchimp. Мне удалось сделать так, как я хочу, чтобы это было в почтовом редакторе, однако, при тестировании на других читателях, заголовок полностью сбился с толку. Я считаю, что проблема в позиционировании элементов, это так?

Я пробовал несколько комбинаций CSS-позиций без какого-либо существенного успеха. 

.header {
	background-color: #5724a9 !important;
    width: 100%;
    height: auto;
    min-height: 14em;
    min-width: 600px;
    position: relative;
}


.VER {
  font-family: Arial;
  font-size: 10px;
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  line-height: 1.8;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  position: absolute;
  top: 3%;
  left: 3%;
  word-wrap: break-word;
}

.logo {
  width: 28%;
  max-height: 12em;
  object-fit: contain;
  float: left;
  position: absolute;
  padding-top: 2em;
  padding-left: 14.5em;
  padding-right: 14.5em;
}
<div class="header">

<a href="*|ARCHIVE|*" style="text-decoration: none;"> <p class="VER">Ver este email no browser</p></a>



<a href="https://www.instagram.com/desembola/" style="text-decoration: none; display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/38baf9eb-8971-4232-8877-e821fb206396.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/929291fe-8e66-433a-893d-860c863dd597.png 2x,
             https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/0668c4e9-df06-42cd-a8fb-0125371d2478.png 3x" class="instagram"></a>
             
 <a href="https://www.facebook.com/desembolanews/" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/d29b31ac-a288-47a3-aa9c-d2ab0b650374.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e92c4f99-3f9a-4676-af77-0fa93f54c0e6.png 2x,
             https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/abb16351-fc77-4bf5-b34c-efa005ee76fe.png 3x" class="facebook"></a>            
     
<a href="https://open.spotify.com/user/5hmqdqrhlk9vcweti5ukuf3ow?si=dzJKoTzKSoGK_fuLByzZZQ" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/7ab88f02-314e-4cc7-bbeb-0d3d216d1dac.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/433683ea-5f9d-4d3a-ac8c-ab0d4a6de392.png  2x, https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e9d7c117-efdb-448c-aa7a-bdbe0a3ad2f5.png 3x" class="spotify"></a>

Ожидаемый: https://imgur.com/prS310S

Реальность (в разных браузерах):

enter image description here

enter image description here

Ответы [ 2 ]

1 голос
/ 06 мая 2019

К сожалению, электронные письма отображаются очень примитивно.Использование div s и отдельных объявлений стилей, скорее всего, не будет работать в большинстве почтовых клиентов.

Для начала у вас будет для использования макетов таблиц.Некоторые лучшие практики здесь

И вам придется встроить все свои инструменты CSS, mailchimp: здесь

Не стоит тратить свое время на попытки разработкиHTML-письма, как вы бы разработали сайтКак только вы приступите к описанному выше, вам будет легче определить конкретные проблемы с разработкой.

0 голосов
/ 08 мая 2019

Вот пример того, как это можно сделать. В основном 3 колонки с изображениями и ссылками в разных колонках.

Вы должны помнить, что электронные письма не являются веб-страницами. Каждый элемент должен иметь свой собственный CSS-код. Медиа-запрос и глобальный CSS могут находиться в заголовке документа, но не все CSS будут читаться всеми почтовыми клиентами. Ознакомьтесь с лучшим руководством CSS, созданным Campaign Monitor некоторое время назад. Это лучший ресурс для начала, когда дело доходит до CSS. 

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="purple">
  <tbody>
    <tr>
      <td width="200"><a href="*|ARCHIVE|*" style="text-decoration: none;color:#ffffff;"> <p class="VER">Ver este email no browser</p></a></td>
      <td align="center" style="color:#ffffff;">Logo here</td>
      <td width="100">
        
          <a href="https://www.instagram.com/desembola/" style="text-decoration: none; display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/38baf9eb-8971-4232-8877-e821fb206396.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/929291fe-8e66-433a-893d-860c863dd597.png 2x,
             https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/0668c4e9-df06-42cd-a8fb-0125371d2478.png 3x" class="instagram"></a>
             
 <a href="https://www.facebook.com/desembolanews/" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/d29b31ac-a288-47a3-aa9c-d2ab0b650374.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e92c4f99-3f9a-4676-af77-0fa93f54c0e6.png 2x,
             https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/abb16351-fc77-4bf5-b34c-efa005ee76fe.png 3x" class="facebook"></a>            
     
<a href="https://open.spotify.com/user/5hmqdqrhlk9vcweti5ukuf3ow?si=dzJKoTzKSoGK_fuLByzZZQ" style="text-decoration: none;display: inline-block"><img src="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/7ab88f02-314e-4cc7-bbeb-0d3d216d1dac.png" srcset="https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/433683ea-5f9d-4d3a-ac8c-ab0d4a6de392.png  2x, https://gallery.mailchimp.com/82a2f49caf501fc10ae6ea563/images/e9d7c117-efdb-448c-aa7a-bdbe0a3ad2f5.png 3x" class="spotify"></a>
        
      </td>
    </tr>
  </tbody>
</table>
...