How to make table cells responsive in iOS Mail App

Question

I'm currently developing an email that has a 2-column layout in various places. I initially used <div> tags for each column, which worked great in every email client except older versions of Outlook (columns would render at 100% width, regardless of screen size).

To fix the Outlook problem, I simply changed the <div> tags into <td>'s. Now, I have a problem in the iOS mail app (10.1.1) where <td>'s refuse to go full-width on smaller screens. In my code below, you can see that both of the <td class="col-6-article"> elements have a fixed width of 300px, yet when I open the email in the iOS mail app then both of those elements are exactly 50% screen width. Here's a screenshot: https://i.sstatic.net/kNEpG.jpg

Has anyone else run into this issue with the iOS mail app? I can't figure out why my inline styles and media queries are being ignored, simply because the elements are now table-cells instead of divs.

HTML (sorry, tried my best to clean it up):

<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 query:

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

Answer 1

You have dueling !important tags; you don't need to include !important in the inline css. Change this:

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

To this:

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

Once the !important is removed from the body's inline css, the media query code can override the 300px width and change it to 100% or whatever you want.