Как сделать ячейки таблицы отзывчивыми в iOS Mail App

Question

В настоящее время я разрабатываю электронное письмо, которое имеет двухколонную разметку в разных местах. Я изначально использовал <div> теги для каждого столбца, которые прекрасно работали в каждом почтовом клиенте, кроме старых версий Outlook (столбцы отображались бы с шириной 100% независимо от размера экрана).

Чтобы исправить проблему Outlook, я просто изменил <div> теги в <td>"S. Теперь у меня есть проблема в почтовом приложении iOS (10.1.1), где <td>отказывается идти на полную ширину на экранах меньшего размера. В моем коде ниже вы можете видеть, что оба <td class="col-6-article"> ширина элементов составляет 300 пикселей, но когда я открываю электронную почту в почтовом приложении iOS, оба элемента имеют ширину экрана ровно 50%. Вот скриншот: http://imgur.com/a/0XsGz

Кто-нибудь еще сталкивался с этой проблемой с почтовым приложением iOS? Я не могу понять, почему мои встроенные стили и медиазапросы игнорируются, просто потому, что элементы теперь являются ячейками таблицы, а не элементами div.

HTML (извините, старался изо всех сил, чтобы очистить его):

<table cellspacing="0" cellpadding="0" width="100%" align="center">
  <tbody>
    <tr style="vertical-align: top;">
      <td width="100%">
        <table class="container" style="max-width: 650px; margin: 0 auto;background:#fff;" cellspacing="0" cellpadding="0" width="100%" align="center">
          <tr>
            <td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
              <img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" />
              <h3>Pledges to Ipsum fall short</h3>
              <p>Abby Bruell | Jun 2015</p>
              <p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p>
              <table>
                <tr>
                  <td style="text-align: center; height: 33px; width: 160px; background: #007c76;">
                    <table style="margin: 0 auto;">
                      <tr height="5" style="height:5px"></tr>
                      <tr style="line-height:normal">
                        <td><a style="padding: 0; color: #ffffff" href="#">
                          <span style="color: #FFFFFF; font-size: 14px">READ MORE</span>
                          </a>
                        </td>
                        <td>
                          <a style="padding: 0; color: #ffffff;" href="#">
                          <img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" />
                          </a>
                        </td>
                      </tr>
                      <tr height="5" style="height:5px"></tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
            <td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
              <img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" />
              <h3>Pledges to Ipsum fall short</h3>
              <p>Abby Bruell | Jun 2015</p>
              <p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p>
              <table>
                <tr>
                  <td style="text-align: center; height: 33px; width: 160px; background: #007c76;">
                    <table style="margin: 0 auto;">
                      <tr height="5" style="height:5px"></tr>
                      <tr style="line-height:normal">
                        <td><a style="padding: 0; color: #ffffff" href="#">
                          <span style="color: #FFFFFF; font-size: 14px">READ MORE</span>
                          </a>
                        </td>
                        <td>
                          <a style="padding: 0; color: #ffffff;" href="#">
                          <img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" />
                          </a>
                        </td>
                      </tr>
                      <tr height="5" style="height:5px"></tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
</table>

CSS медиа-запрос:

@media screen and (max-width: 650px) and (max-device-width: 650px) {
     .col-6-article {
         width: 100% !important;
         display: block !important;
     }
}

Answer 1

У вас дуэль !important теги; вам не нужно включать !important во встроенном CSS. Изменить это:

<td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">

К этому:

<td class="col-6-article" style="display:inline-block; width:300px padding: 0 0 25px 15px;">

Однажды !important удаляется из встроенного css тела, код медиазапроса может переопределить ширину 300px и изменить его на 100% или что угодно.