title: contact form 7 flips clickin on text fields
body: <p>There is a media query that flips the screen when landscape mode is detected (to somehow force portrait mode) for that I'm using this:</p>
  
  <pre><code>@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape)
  </code></pre>
  
  <p>I'm working on a mobile version of a web page (that contains the contact form 7 plugin) with this query:</p>
  
  <pre><code>@media only screen and (max-width: 500px) 
  </code></pre>
  
  <p>So when I see it on a mobile device it looks like<a href="https://i.stack.imgur.com/e1hEM.png" rel="nofollow noreferrer"> this</a> (good enough for now)</p>
  
  <p>But when I click on a text field the "screen" flips and look like<a href="https://i.stack.imgur.com/GHiqW.png" rel="nofollow noreferrer"> this</a>  and I don't know why. Please help me.</p>
  
  <p>Relevant code:</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div id="div-mail"&gt;
  [contact-form-7 id="95" title="formulario de contacto"]
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#div-mail {
  position: relative;
  right: -35px !important;
  bottom: 270px !important;
  max-width: 80%;
  z-index:2;
  top: -365px;
  } 
  </code></pre>
  
  <p>Contact form 7 text fields CSS</p>
  
  <pre><code>#contact-email {
  max-width: 65% !important;
  }
  
  #contact-textarea {
  max-width: 70% !important;
  }
  </code></pre>