title: Media query isn't stacking columns on mobile, but is applying other styling?
body: <p>I'm having a bit of an issue with my media query (I'm new to using these, this is the "safest" way to render html emails responsive).</p>
  
  <p>My media query:</p>
  
  <pre><code>@media only screen and (max-width: 600px){
  * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  }
  .submitBtn {
  margin: auto !important;
  float: none !important;
  }
  td, h3, h4, .branding, .paragraph, .container {
  display: block !important;
  width: 100% !important;
  float: none !important;
  height: auto !important;
  margin: auto !important;
  padding: 0 !important;
  text-align: center !important;
  }
  td {
  padding-right: 5px !important;
  padding-left: 5px !important;
  padding-top: 10px !important;
  padding-bottom: 15px !important;
  }
  td.branding, img.branding {
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
  }
  .branding {
  padding-bottom: 10px !important;
  }
  .toggle {
  text-align: left;
  }
  table.center {
  text-align: center !important;
  }
  .display-none {
  display: none !important;
  }
  .checkbox {
    display: block !important;
    margin: auto !important;
    max-width: 100% !important;
    float: none !important;
  }
  }
  </code></pre>
  
  <p>As a note, I do have the meta for device-width in the head. All other styling is rendering except where I have two td's, they are not stacking on mobile.</p>
  
  <p>In chrome, using the inspector &amp; setting it responsive, it shows they <em>should</em> be stacking on mobile but when I actually test it to myself they are not.</p>
  
  <p>My first module that should be stacking (I put placeholders to remove sensitive data)</p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center"&gt;
      &lt;tr&gt;
         &lt;td class="branding logo" width="315" align="left"&gt;Stacking image goes here
         &lt;/td&gt;
          &lt;td class="branding" width="315" align="right"&gt;&lt;span class="lighter"&gt;Text &amp; More&lt;/span&gt; &lt;span class="normal"&gt;Stacking text goes here&lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My other bit that should be stacking:</p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center"&gt;
                              &lt;tr&gt;
                                &lt;td class="description" align="left" width="75%"&gt;
                                  &lt;h4 class="indent padding-t"&gt;&lt;span class="normal middle"&gt;&lt;/span&gt;&lt;/h4&gt;
                                  &lt;p class="paragraph indent"&gt;Y
                                  &lt;/p&gt;
                                &lt;/td&gt;
                                &lt;td class="checkbox"&gt;
                                  &lt;input type="checkbox" id="checkbox" name="" onclick="changeValue()" value=""&gt;
                                  &lt;label class="toggle" for="checkbox"&gt;&lt;/label&gt;
                                  &lt;input type="hidden" id="hidden" name="" checked value=""&gt;
                                &lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/table&gt;
  </code></pre>
  
  <p>Thanks in advance for your help and I apologize if this is a "rookie" error because I'm about certain it is!</p>