I have been using adaptive versions of HTML templates for a while, but now want to do a proper responsive one. I recently became a member of Litmus and while perusing the resources available, I found a primer by Kevin Mandeville (great btw). I followed the example on the code, which works beautifully, except on Outlook of course. In the past, I have been hacking it to work on Outlook by reducing the size/precentage on the tables, but that of course screws up the look for other clients. I have been looking into conditionals, but I might not be applying them correctly, as they do not make a difference. Below you will find a screenshot and the sample code. Any help would be greatly appreciated.

Outlook 2010 screenshot

<!doctype html>
<html>
<head>
<meta name="viewport" content="width-device-width, initial-scale=1">
<meta http-equiv="X-UA-compatible" content="IE-edge">
<meta charset="UTF-8">
<style type="text/css">
    body{
        padding: 0px;
        margin: 0px;
        font-family: font-family:Palatino, Georgia; 
    }

    @media screen and (max-width: 600px) {
        table[class="responsive-table"] {
            width: 100% !important;
        }   
        table[class="responsive-table2"] {
            width: 100% !important;
        }   
        img[class="responsive-image"] {
            max-width: 100% !important;
            height: auto !important;
        }
        td[class="headline"] {
            font-size: 36px !important;
            background: #c75ebb;
            color: #f2f600;
            padding-bottom: 20px;
        }
    }
    </style>

    </head>

<body>

<!-- Full width table -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center">
      <!--Full width container -->
      <table width="580" border="0" cellspacing="0" cellpadding="0" class="responsive-table">
    <tr>
      <td>

        <img src="flower.jpg" border="0" width="580" height="375" class="responsive-image" style="display: block;"/>

      </td>
    </tr>
    <tr>
        <td align="center" style="font-size: 48px; padding-top: 20px;" class="headline">
            I &hearts; Flowers
        </td>
    </tr>
    <tr>
        <td style="padding: 20px 0; font-size: 20px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </td>
    </tr>
    <tr>
        <td>
            <table width="290" align="right" border="0" cellspacing="0" cellpadding="0" class="responsive-table2">
                <tr>
                 <td bgcolor="#aaaaaa" style="padding: 15px;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </td>
                </tr>
            </table>
            <table width="290" align="left" border="0" cellspacing="0" cellpadding="0" class="responsive-table2">
                <tr>
                 <td bgcolor="#dddddd" style="padding: 15px;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </td>
                </tr>
            </table>

        </td>
    </tr>
</table>

   </td>
    </tr>
</table>


</body>
</html>