title: Hide wrapper on mobile screen
body: <p>I'm trying to "hide" the wrapper "" on mobile screens, not by actually hiding it or "not displaying it", but by setting the padding to 0px. My initial approach was to use media queries, but my attempts have failed.</p>
  
  <p>Below is the styling for the media query:</p>
  
  <pre><code>&lt;mj-head&gt;
    &lt;mj-style&gt;
      .wrapper-fix div {
          padding: 0px 50px !important;
      }
      @media only screen and (max-width: 480px){
        .wrapper-fix div {
          padding: 0px 0px !important;
          }
      }
    &lt;/mj-style&gt;
  &lt;/mj-head&gt;
  </code></pre>
  
  <p>And below is the wrapper:</p>
  
  <pre><code>&lt;mj-wrapper css-class="wrapping-fix" background-color="#fff"&gt;
    &lt;mj-include path="./somecontent.mjml" /&gt;
  &lt;/mj-wrapper&gt;
  </code></pre>
  
  <p>The approach above doesn't work. My understanding is that the 50/0px are added to  tags after inlining - the actual html content for the email. The  doesn't really exist there.</p>
  
  <p>Did anyone manage to do something like this? How can it be solved? Are there any alternatives?</p>