title: Form Resizing Responsive issue textarea
body: <p>I've got an issue with my responsive textarea. It works fine (across different sizes) until the user tries to expand the form (I've currently got it locked in size with a height/max-height/width/max-width combo). Is there a solution to this? What am I doing wrong - haven't seen this issue before.</p>
  
  <p>Album - <br />
  <a href="http://imgur.com/a/9ICnF#0" rel="nofollow">http://imgur.com/a/9ICnF#0</a></p>
  
  <p>Website - <br />
  <a href="http://pxlprfct.co.uk/" rel="nofollow">http://pxlprfct.co.uk/</a></p>
  
  <p>Html</p>
  
  <pre><code>&lt;textarea name="message" id="message" placeholder="Message"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>form{
      border: none;
      outline: none;
      text-align: center;
      text-decoration: none;
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      color: white;
      text-transform: uppercase;
      background: black;
  
      /*Android Hack*/
      margin-top: -1px;
      padding-bottom: 2em;
  }
  
      #message
  {
      border: none;
      outline: none;
      color: black;
  
      display: block;
      background: white;
      padding: 1em;
      margin: auto;
      font-size: 1em;
      margin-bottom: 1em;
      font-family: 'Open Sans', sans-serif;
  
      height: 12em;
      max-height: 12em;
  
      width: 70%;
      max-width: 70%;
  
  }
  </code></pre>
  
  <p>Sorry about the messy code - it's all been hacked together quickly! :) <br />
  Thanks in advance!
  <br />
  <br />
  <a href="http://jsfiddle.net/qfYQN/1/" rel="nofollow">http://jsfiddle.net/qfYQN/1/</a></p>