How to work responsive email

Question

I did a post about this yesterday. With the help of one answer, I learned the good structure for an email newsletter. I applied those on my email newsletter. I also added media query code. I know, media query is not supported in all email clients. But, Who support, I want some change with layout for them. Unfortunately, media queries haven't worked in my email newsletter, I can't understand what's the reason. This is the visual of desktop version email. This is the visual of mobile version email. Basically, main difference is on the four columns.

1. At mobile, there will be two columns instead of four columns.
2. As last two columns will be placed below the first two columns, last two columns should have spacing from top. So, the above two columns' and below two columns' border(vertical line) can't touch
3. And at desktop version, every columns have border-right property except last one. At mobile, second and fourth column should not have border-right property

To do that, I've arranged my code this way:

1. There is four columns at visual below logo. Basically, those are two separate table contains two columns each. The parent table's width="640". The child table's width="320" The first child table is align="left" So, the two child tables are placed in a row nicely. My intend is make the main table's width="320" for mobile, so the two child tables can't be placed in a row.
2. I've given padding-top: 20px to second child table for mobile. So, that table can get some space from above table.
3. As, second and last column have no right-border property, I have called a class on that for mobile and given them border: 0;

Inside head code:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Email</title>
<style>
@media only screen and (max-device-width: 480px) { 
    table[class="mainTable"] {
        width: 320px !important;
    }
    table[class="subTable"] {
        padding: 20px 0 0 !important;   
    }
    td[class="noBorder"] {
        border: 0 !important;
    }
}
</style>

Inside Body Code:

<table width="640" border="0" cellspacing="0" cellpadding="0" class="mainTable" style="margin: 0px auto; font-family: Helvetica, Arial, sans-serif; padding: 35px 0 0;">
        <tr>
            <td style="font-size: 25px;">
                LOGO
            </td>
        </tr>
        <tr>
            <td>
                <table align="left" width="320" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0;">
                    <tr>
                        <td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
                            <p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
                            <p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
                            <a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
                        </td>
                        <td align="center" valign="top" class="noBorder" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
                            <p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
                            <p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
                            <a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
                        </td>
                    </tr>
                </table>
                <table width="320" border="0" cellspacing="0" cellpadding="0" class="subTable" style="margin: 0; padding: 0;">
                    <tr>
                        <td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
                            <p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
                            <p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
                            <a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
                        </td>
                        <td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px;">
                            <p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
                            <p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
                            <a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </td>
        </tr>
    </table>

But, this doesn't work for me. At mobile, I've seen no change according to my code. I've checked at android Gmail app(may be, it's not supporting media query). At there, four columns automatically go to the two columns in a two row, but spacing and border haven't worked. I've also checked to Sony android default Email app(It should be support media query). At there, there is no changed happened! It shows exactly same way how the desktop shows. Besides Android device, I haven't any other mobile device for checking :(

Answer 1

In the answer I posted the other day (the deleted dupe), pretty sure I linked you to this basic responsive example.

You haven't applied the display:block; toggle. Your email section should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    @media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
  </style>
</head>
<body>

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" class="switch">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50%" valign="top" style="padding:30px;" bgcolor="#333333">
            Cell 1
          </td>
          <td width="50%" valign="top" style="padding:30px;" bgcolor="#444444">
            Cell 2
          </td>
        </tr>
      </table>
    </td>
    <td width="50%" class="switch">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50%" valign="top" style="padding:30px;" bgcolor="#555555">
            Cell 3
          </td>
          <td width="50%" valign="top" style="padding:30px;" bgcolor="#666666">
            Cell 4
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body></html>

Answer 2

Trying to make a responsive email is pretty much still a waste of time and effort due to the amount of email clients which will ignore and/or strip out your code.

HTML emails should basically be coded like it is 1999 with tables, images, some basic inline styles etc.

If it must be responsive try just removing the width from your tables and allowing them to be naturally responsive.

Here's a good resource on tips for HTML emails:

http://kb.mailchimp.com/article/how-to-code-html-emails