Отзывчивый размер шрифта не работает в электронной почте

Peekay спросил: 12 мая 2018 в 05:03 в: css

Я не могу заставить свой отзывчивый размер шрифта работать в электронной почте, которую я создаю. Проблемы с Outlook, gmail, aol.

Вот HTML

<th class="small-2 large-2 columns" valign="middle" style="Margin: 0 auto; background-color: #E7E7E7; border: 2px solid #ffffff; color: #0a0a0a; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; min-height: 85px; padding: 0; padding-bottom: 16px; padding-left: 0 !important; padding-right: 0 !important; padding-top: 20px; text-align: left; width: 80.66667px;">
   <p class="field text-center" style="Margin: 0; Margin-bottom: 10px; color: #666666 !important; font-family: 'Open Sans', sans-serif; font-size: 8px; font-weight: normal; line-height: 1.75; margin: 0; margin-bottom: 2px; padding: 0; text-align: center;">Price</p>
   <p pardot-region="" class="number text-center" style="Margin: 0; Margin-bottom: 10px; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: bold; line-height: 1.75; margin: 0; margin-bottom: 10px; padding: 0; text-align: center;">$512.72</p>
</th>

Вот CSS, который я ввел позже с помощью встроенного инструмента

.financial-table th p.field {
  color: #666666 !important;
  margin-bottom: 2px;
  font-size: 8px;
}.financial-table th p.number {
  font-size: 10px;
  color: #333333;
  font-weight: bold;
}@media only screen and (min-width:500px){  .financial-table th p.number {
    font-size: 16px !important;
  }
  .financial-table th p.field {
    font-size: 12px !important;
  }
}

Что я делаю неправильно?


2 ответа

Kamsi Ibeziako ответил: 12 мая 2018 в 05:40

Ваш код, кажется, работает отлично, попробуйте выбрать абзацы с помощью всего лишь p.field и p.number, например,

p.field {
  color: #666666 !important;
  margin-bottom: 2px;
  font-size: 8px;}p.number{
  font-size: 10px;
  color: #333333;
  font-weight: bold;
}@media only screen and (min-width:500px){  p.number {
    font-size: 16px !important;
  }
  p.field {
    font-size: 12px !important;
  }
}

живого кода. jsfiddle. измените размер окна результатов, чтобы увидеть эффект

Peekay ответил: 12 мая 2018 в 06:06
пытался, но все еще получал проблему. Я должен упомянуть, что это для электронной почты. Не совсем уверен, насколько отзывчивые стили работают с inline css, если честно.
Есть решение
Peekay ответил: 12 мая 2018 в 07:46

Так получилось, что это работает наконец. Добавление тега класса span с медиа-запросом к элементу, зафиксированному с помощью

<th class="small-2 large-2 columns" valign="middle" style="Margin: 0 auto; background-color: #E7E7E7; border: 2px solid #ffffff; color: #0a0a0a; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; min-height: 85px; padding: 0; padding-bottom: 16px; padding-left: 0 !important; padding-right: 0 !important; padding-top: 20px; text-align: left; width: 80.66667px;">
   <p class="field text-center" style="Margin: 0; Margin-bottom: 10px; color: #666666 !important; font-family: 'Open Sans', sans-serif; font-size: 8px; font-weight: normal; line-height: 1.75; margin: 0; margin-bottom: 2px; padding: 0; text-align: center;"><span class="mobile-number">Price</span></p>
   <p pardot-region="" class="number text-center" style="Margin: 0; Margin-bottom: 10px; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: bold; line-height: 1.75; margin: 0; margin-bottom: 10px; padding: 0; text-align: center;"><span class="mobile-number">$512.72<span></p>
</th>
Syfer ответил: 12 мая 2018 в 11:18
Это странная работа. Вы сказали Issues is with outlook, gmail, aol, который сделал это исправление? Gmail?
Peekay ответил: 13 мая 2018 в 03:46
@Syfer все из них. Как работают чувствительные стили при использовании класса vs inline-style. Не всегда ли стиль inline имеет приоритет?
Syfer ответил: 13 мая 2018 в 05:31
Inline действительно имеет приоритет, если в голове нет CSS-заголовка с серьезной перезаписью, причина, о которой я просила, - мне никогда не приходилось добавлять дополнительный промежуток, чтобы заставить реагирующую часть работать. Ориентация на правильный класс всегда меня работала. Приятно знать, что сработало для вас. Честно говоря, я не поклонник inliner.