Медиа-запрос Mailchimp в Gmail - PullRequest
Новая
       65

Медиа-запрос Mailchimp в Gmail

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

В настоящее время я работаю над макетом электронной почты, используя Mailchimp, и я хочу использовать блок Image + Text. Я избегаю использовать блок кода, потому что хочу, чтобы это электронное письмо могло использоваться не разработчиком. Вот мой код: 

<div class="container">
<div class="container-title">
<div class="title">Some Title Here</div>

<div class="tag">Tag</div>
</div>

<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s.</div>
<a class="button" href="https://help.catapa.com/articles/penambahan-variabel-pada-komponen-gaji-bertipe-formula-8b894d14-4bee-4e79-b588-8f5956bcfdec">A Button</a></div>
<style type="text/css">.title {
color:rgb(51, 51, 51); display:inline-block; font-family:open sans,helvetica neue,helvetica,arial,sans-serif; font-size:18px; font-weight:bold; margin-bottom:8px; text-align:left;
}
.tag {
margin-top: 12px; margin-bottom: 12px; margin-left: 4px; height: 22px; line-height: 22px; display: inline-block; padding-left: 10px; padding-right: 10px; background-color: rgb(247, 181, 11); font-size: 13px; font-weight: bold; color: rgb(255, 255, 255); border-radius: 12px; font-family: open sans, helvetica neue, helvetica, arial, sans-serif;
}
.desc {
font-size: 14px; font-family: open sans, helvetica neue, helvetica, arial, sans-serif; text-align: left;
}
.button {
cursor: pointer; display:inline-block; margin-top: 16px; margin-bottom: 32px; background-color: rgb(0, 201, 131); font-size: 13px; line-height: 42px; height: 42px; padding-left: 24px; padding-right: 24px; box-shadow:0 3px 6px 0 rgba(0,0,0,0.15); border-radius: 3px; font-weight: bold !important; font-family: open sans, helvetica neue, helvetica, arial, sans-serif; color: #fff !important; text-decoration: none !important;}
.button:hover {
background-color: rgb(0, 201, 131) !important;
}
@media screen and (min-width: 481px){
.container-title {
margin-top: -12px;
}
}
@media screen and (max-width: 480px){
.container, .title, .desc {
text-align: center !important;
}
}
</style>

В настоящее время это выглядит так на рабочем столе. enter image description here И на мобильном предварительном просмотре это выглядело так (по центру, как то, чего я хочу достичь). enter image description here Однако в Gmail (iOS и Android) кажется, что приложение не может прочитать все, что я помещаю в медиа-запросы. Вот как это выглядит. enter image description here

Я читал, что Gmail теперь поддерживает медиазапросы, а также пробовал решения некоторых людей, но я не знаю, что я сделал неправильно, потому что мой код все еще не делает Работа. Любая помощь приветствуется!

...