The Perl Toolchain Summit needs more sponsors. If your company depends on Perl, please support this very important event.
KAMELKEV / CSS-Inliner-4008 / t / html / mediaquerytest.html 
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

img {
border: 0;
}

.ReadMsgBody {
width: 100%;
}

.ExternalClass {
width: 100%;
}

body {
background-color:#CCCCCC;
}

.wrapper {
width: 600px;
}

.nested {
width: 100%;
}

.backgroundTable {
background-color:#CCCCCC;
}

h1 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

h3 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

h4 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

h5 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

h6 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

p {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

td {
vertical-align:top;
}

.topArea {
background-color: #ffffff;
}

.mastheadArea {
background-color: #ffffff;
}

.topArea {
padding:20px;
}

.topArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
text-align:left;
}

.topArea a {
text-decoration: underline;
color: #6c8b9e;
}

.firstAreaWrapper {
background-color: #ffffff;
padding:20px;
}

.firstArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
text-align:left;
}

.firstArea a {
text-decoration: underline;
color: #6c8b9e;
}

.secondAreaWrapper {
background-color: #ffffff;
padding:20px;
}

.secondArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
text-align:left;
}

.secondArea a {
text-decoration: underline;
color: #6c8b9e;
}

.thirdAreaWrapper {
background-color: #ffffff;
padding:20px;
}

.thirdArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
text-align:left;
}

.thirdArea a {
text-decoration: underline;
color: #6c8b9e;
}

.contentBorder {
border: 1px none #ffffff/* @editable */;
}

.heading_1 {
color: #333333;
font-size: 20px;
font-family: Tahoma;
font-weight: bold;
font-style: normal;
}

.heading_2 {
color: #6c8b9e;
font-size: 16px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
}

.previewArea {
background-color: #ffffff;
border-top:0px none;
border-bottom:0px none;
text-align: center;
padding:5px;
}

.previewArea {
color: #12347A;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
}

.previewArea a {
text-decoration: none;
color: #6c8b9e;
}

.mastheadArea {
text-align: center;
}

.mastheadArea img {
border:none;
display:block;
}

.footerArea {
border-top: 1px none #ffffff;
background-color: #ffffff;
text-align: center;
}

.footerArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
}

.footerArea a {
text-decoration: none;
color: #6c8b9e;
}

.bodySettings {
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0;
}

@media only screen and (max-width: 600px) {

table[class="wrapper"] {
width: 95% !important;
}

table[class="col-3"] {
width: 100% !important;
}

img {
width: 100% !important;
}

td[class="firstAreaWrapper"] {
display: block;
}

td[class="secondAreaWrapper"] {
display: block;
}

td[class="thirdAreaWrapper"] {
display: block;
}

td[class="firstAreaWrapper"] img {
float: right;
margin-left: 10px;
}

td[class="secondAreaWrapper"] img {
float: right;
margin-left: 10px;
}

td[class="thirdAreaWrapper"] img {
float: right;
margin-left: 10px;
}

td[class="mastheadArea"] img {
height:auto !important;
width:100% !important;
}

}
</style>
</head>

<body>
  <table width="100%" cellspacing="0" cellpadding="0" class="backgroundTable">
    <tr>
      <td valign="top" align="center">
        <table class="wrapper" cellspacing="0" cellpadding="0">
          <tr>
            <td class="contentBorder">
              <table class="nested" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="previewArea">
                    <div mm:edit="header">
                      <p style="text-align: center;">Having trouble reading this email?
                        <a href="#[ONLINEVIEW]# ">View it in your browser.</a>
                      </p>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="mastheadArea">
                    <img mm:masthead="masthead" src="http://www.mailermailer.com/images/tmpl/mastheads/news_and_updates/newsletter.jpg" />
                  </td>
                </tr>
              </table>
              <table class="nested" cellpadding="0" cellspacing="0">
                <tr>
                  <td valign="top" class="topArea">
                    <img src="http://images.mailermailer.com/showplaceholder.bin?width=560" mm:image="image_top" style="max-width:560px;" />
                    <div>&nbsp;</div>
                    <div mm:edit="top">
                      <p>
                        <span class="heading_1">Heading</span>
                      </p>
                      <p>&nbsp;</p>
                      <p>Normal text.</p>
                      <p>&nbsp;</p>
                      <p><span class="heading_2">Sub-Heading</span></p>
                      <p>&nbsp;</p>
                      <p>Normal text.</p>
                    </div>
                  </td>
                </tr>
              </table>
              <table class="nested" cellpadding="0" cellspacing="0">
                <tr>
                  <td valign="top" class="firstAreaWrapper">
                    <table class="col-3" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="firstArea">
                          <img src="http://images.mailermailer.com/showplaceholder.bin?width=160" mm:image="image_first" style="max-width:160px;" alt="" />
                          <div>&nbsp;</div>
                          <div mm:edit="first">
                            <p>
                              <span class="heading_1">Heading</span>
                            </p>
                            <p>&nbsp;</p>
                            <p>Normal text.</p>
                            <p>&nbsp;</p>
                            <p><span class="heading_2">Sub-Heading</span></p>
                            <p>&nbsp;</p>
                            <p>Normal text.</p>
                          </div>
                        </td>
                      </tr>
                    </table>        
                  </td>
                  <td valign="top" class="secondAreaWrapper">
                    <table class="col-3" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="secondArea">
                          <img src="http://images.mailermailer.com/showplaceholder.bin?width=160" mm:image="image_second" style="max-width:160px;" alt="" />
                          <div>&nbsp;</div>
                          <div mm:edit="second">
                            <p>
                              <span class="heading_1">Heading</span>
                            </p> 
                            <p>&nbsp;</p>
                            <p>Normal text.</p>
                            <p>&nbsp;</p>
                            <p><span class="heading_2">Sub-Heading</span></p>
                            <p>&nbsp;</p>
                            <p>Normal text.</p>
                          </div>
                        </td>
                      </tr>
                    </table>      
                  </td>
                   <td valign="top" class="thirdAreaWrapper">
                    <table class="col-3" cellpadding="0" cellspacing="0">
                      <tr>
                        <td valign="top" class="thirdArea">
                          <img src="http://images.mailermailer.com/showplaceholder.bin?width=160" mm:image="image_third" style="max-width:160px;" alt="" />
                          <div>&nbsp;</div>
                          <div mm:edit="third">
                            <p>
                              <span class="heading_1">Heading</span>
                            </p>  
                            <p>&nbsp;</p>
                            <p>Normal text.</p>
                            <p>&nbsp;</p>
                            <p><span class="heading_2">Sub-Heading</span></p>
                            <p>&nbsp;</p>
                            <p>Normal text.</p>
                          </div>
                        </td>
                      </tr>
                    </table>      
                  </td>
                </tr>
              </table>
              <table class="nested" cellpadding="20" cellspacing="0">  
                <tr>
                  <td class="footerArea" colspan="2">
                    <div mm:footer="footer">
                      #[SENDER_COMPANY]#
                      <br>
                      #[SENDER_ADDRESS]#
                      <br>
                      This email was sent to: <a href="mailto:#[USER_EMAIL]#">#[USER_EMAIL]#</a>
                      <br>
                      <a href="#[UNSUB_LINK]#">Unsubscribe</a>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>