title: responsive issue at display
body: <p>I have created a responsive mail that the client receives when buying a ticket. In the same file I have two different CSS classes:</p>
  
  <pre><code>*[class=noDisplayAtMobile] { display: none !important; display:none; mso-hide:all }
  
  *[class=displayAtMobile] { display: block !important; width:100% !important; max-width:650px !important ; max-height:inherit!important; float:none !important; overflow:visible !important; }
  </code></pre>
  
  <p>The first class is used to display the mail on the desktop and the second displays it for mobile devices,when i use the second class at the original (fullscreen) layout i use the follow style to not display at fullscreen </p>
  
  <pre><code>   style="width: 0; max-height: 0; overflow: hidden; float: left;"
  </code></pre>
  
  <p>I see the responsive output when my browser window is less than 650px and the non-responsive output when it is fullscreen, but at the mail (GMail) I see both of them...</p>
  
  <p>Does anyone have any ideas about what the problem is and what I can do to fix it?</p>