title: Swap placeholder text based on resolution (media query)
body: <p>I'm working on a responsive design. I've hit a bit of a wall with there not being enough space for an <code>input</code> box and it's <code>label</code>. So I have decided to hide the label on smaller screen sizes.</p>
  
  <p>At present it has the placeholder text <code>your email</code> inside it, but I want <em>only</em> on screens less than 400 (so up to 399px wide) a different place holder of <code>Join our newsletter</code>.</p>
  
  <p>I reckon there will need to be some JS to perform this, rather than anything with CSS.</p>
  
  <p>Essentially:
  if screen size less than 400:
  placeholder text = Join our newsletter</p>
  
  <p>else:
  placeholder text = Your email.</p>
  
  <p>Here is the HTML I have:</p>
  
  <pre><code>&lt;div id="mc_embed_signup"&gt;
  &lt;input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email"&gt;
  &lt;/div&gt;
  </code></pre>