I'm currently looking in responsive tables to reposition our sales items around. If the screen width is wide enough, it should show a table with 2 columns filled in with the items. If the screen width is small (usually when viewed on mobile devices), it should show a table with just 1 column filled in.

Mockup:

I'm testing this on Android Gmail and Yahoo! Mail, and iPhone native Mail app.

Below is the code for my attempt at repositioning the items around in the table in a responsive way:

<html>
  <body>
    <style type="text/css">
      @media only screen and (max-width: 420px) {
        .full {
          display: block !important;
          width: 100% !important;
        }
      }
    </style>
    <table class="deviceWidth" dir="rtl" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
      <tr>
        <td width="50%" dir="ltr" align="right" class="full">
          <div style="display: block;">
            <table style="font-family: Arial; width: 300px; height: 300px; font-size: 16px; border-collapse: collapse; border: 1px solid #d2d2d2; margin: 0 auto; table-layout: fixed;">
              <tbody>
                <tr style="border-top: 3px solid #6736A3;">
                  <td style="background-color: #6736A3; color: #ffffff; font-size: 80%; text-align: center; width: 50px; height: 20px; padding: 5px;">
                    <span style="font-weight: bold;">DEAL</span>
                  </td>
                  <td rowspan="3" style="width: 150px;">
                    <img src="http://d2z2x9m6jf98op.cloudfront.net/offer-deal/8f/8f07ef03-e822-49d0-a11c-8ebdfa1f023b.jpg" style="width: 100%;" />
                  </td>
                  <td rowspan="2" style="text-align: center; vertical-align: middle;">
                    <img src="http://d2z2x9m6jf98op.cloudfront.net/free-shipping.png" class="shipping-image" title="Free Shipping " />
                    <span style="color: #1989CE; font-size: 60%; vertical-align: middle; font-weight: bold;">on 75%+</span>
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="height: 20px;">
                  </td>
                </tr>
                <tr>
                  <td colspan="3">
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="text-align: left; padding-left: 10px; padding-right: 10px;">
                    <span style="font-weight: bold;">Dyson Ball Upright Vacuum Cleaner (Refurbished)</span>
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="font-size: 80%; padding-left: 10px; padding-right: 10px;">
                    <b>
                      <span style="font-size: 110%;">$146.77</span>
                    </b>
                    <s>$329.99</s> at Newegg
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="font-weight: bold; color: #74B818; padding-left: 10px; padding-right: 10px;">
                    <span style="font-size: 80%;">After 1.5% Cash Back from BeFrugal.</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
        <td width="50%" dir="ltr" align="left" class="full">
          <div style="display: block;">


          <table style="font-family: Arial; width: 300px; height: 300px; font-size: 16px; border-collapse: collapse; border: 1px solid #d2d2d2; margin: 0 auto; table-layout: fixed;">
            <tbody>
              <tr style="border-top: 3px solid #6736A3;">
                <td style="background-color: #6736A3; color: #ffffff; font-size: 80%; text-align: center; width: 50px; height: 20px; padding: 5px;">
                  <span style="font-weight: bold;">DEAL</span>
                </td>
                <td rowspan="3" style="width: 150px;">
                  <img src="http://d2z2x9m6jf98op.cloudfront.net/offer-deal/8f/8f07ef03-e822-49d0-a11c-8ebdfa1f023b.jpg" style="width: 100%;" />
                </td>
                <td rowspan="2" style="text-align: center; vertical-align: middle;">
                  <img src="http://d2z2x9m6jf98op.cloudfront.net/free-shipping.png" class="shipping-image" title="Free Shipping " />
                  <span style="color: #1989CE; font-size: 60%; vertical-align: middle; font-weight: bold;">on 75%+</span>
                </td>
              </tr>
              <tr>
                <td colspan="3" style="height: 20px;">
                </td>
              </tr>
              <tr>
                <td colspan="3">
                </td>
              </tr>
              <tr>
                <td colspan="3" style="text-align: left; padding-left: 10px; padding-right: 10px;">
                  <span style="font-weight: bold;">Dyson Ball Upright Vacuum Cleaner (Refurbished)</span>
                </td>
              </tr>
              <tr>
                <td colspan="3" style="font-size: 80%; padding-left: 10px; padding-right: 10px;">
                  <b>
                    <span style="font-size: 110%;">$146.77</span>
                  </b>
                  <s>$329.99</s> at Newegg
                </td>
              </tr>
              <tr>
                <td colspan="3" style="font-weight: bold; color: #74B818; padding-left: 10px; padding-right: 10px;">
                  <span style="font-size: 80%;">After 1.5% Cash Back from BeFrugal.</span>
                </td>
              </tr>
            </tbody>
          </table>
          </div>
        </td>
      </tr>
    </table>


    <!-- template -->
    <!-- 


    <table style="font-family: Arial; width: 300px; height: 300px; font-size: 16px; border-collapse: collapse; border: 1px solid #d2d2d2; margin: 0 auto; table-layout: fixed;">
      <tbody>
        <tr style="border-top: 3px solid #6736A3;">
          <td style="background-color: #6736A3; color: #ffffff; font-size: 80%; text-align: center; width: 50px; height: 20px; padding: 5px;">
            <span style="font-weight: bold;">DEAL</span>
          </td>
          <td rowspan="3" style="width: 150px;">
            <img src="http://d2z2x9m6jf98op.cloudfront.net/offer-deal/8f/8f07ef03-e822-49d0-a11c-8ebdfa1f023b.jpg" style="width: 100%;" />
          </td>
          <td rowspan="2" style="text-align: center; vertical-align: middle;">
            <img src="http://d2z2x9m6jf98op.cloudfront.net/free-shipping.png" class="shipping-image" title="Free Shipping " />
            <span style="color: #1989CE; font-size: 60%; vertical-align: middle; font-weight: bold;">on 75%+</span>
          </td>
        </tr>
        <tr>
          <td colspan="3" style="height: 20px;">
          </td>
        </tr>
        <tr>
          <td colspan="3">
          </td>
        </tr>
        <tr>
          <td colspan="3" style="text-align: left; padding-left: 10px; padding-right: 10px;">
            <span style="font-weight: bold;">Dyson Ball Upright Vacuum Cleaner (Refurbished)</span>
          </td>
        </tr>
        <tr>
          <td colspan="3" style="font-size: 80%; padding-left: 10px; padding-right: 10px;">
            <b>
              <span style="font-size: 110%;">$146.77</span>
            </b>
            <s>$329.99</s> at Newegg
          </td>
        </tr>
        <tr>
          <td colspan="3" style="font-weight: bold; color: #74B818; padding-left: 10px; padding-right: 10px;">
            <span style="font-size: 80%;">After 1.5% Cash Back from BeFrugal.</span>
          </td>
        </tr>
      </tbody>
    </table>
    -->


  </body>
</html>

The issue I'm having is that it's not responding in the way I expected it to do.

I have already checked out the following resources:

  • MailChimp's Responsive Column Layouts - I used the first and second method, and found the first one was working for us and the second one didn't work. However, when replacing the example items in the first method with the items in my code, it fails. The code above is the first method, with my sales items replacing the cat images in the example code.
  • Campaign Monitor's Stacked Column Design - This is a variant of MailChimp's first method. Again, I failed here.

If anyone have insights on this, please let me know. Thanks.