Swap placeholder text based on resolution (media query)

Question

I'm working on a responsive design. I've hit a bit of a wall with there not being enough space for an input box and it's label. So I have decided to hide the label on smaller screen sizes.

At present it has the placeholder text your email inside it, but I want only on screens less than 400 (so up to 399px wide) a different place holder of Join our newsletter.

I reckon there will need to be some JS to perform this, rather than anything with CSS.

Essentially: if screen size less than 400: placeholder text = Join our newsletter

else: placeholder text = Your email.

Here is the HTML I have:

<div id="mc_embed_signup">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email">
</div>

Answer 1

As a pure CSS solution, we could have two <input>s - having different placeholders - which are shown in different screen sizes - Example here:

input.large { display: inline-block; }
input.small { display: none; }

@media (max-width: 399px) { 
  input.large { display: none; }
  input.small { display: inline-block; }
}

<input type="email" name="email[]" class="required email large" id="mce-EMAIL" placeholder="Your Email">
<input type="email" name="email[]" class="required email small" placeholder="Join our newsletter">

Important notes:

1. In this case we should make sure that the id of our two inputs are different. Besides, If id is added to <input> just because of its usage for label elements, we could just wrap the input by label instead.

2. Using more than one input which have the same name, will override the name/value pair in HTTP request method.

One possible solution is to use an array name value for name attribute, (as example above) and handle it at server-side (It's better to keep name values in lowercase).

Alternatively, we could disable the hidden input in order to prevent its value from being sent to server:

$('input:hidden').prop("disabled", true);

Using JavaScript in a Pure CSS Solution? Maybe... maybe not... but nowadays no websites in the modern world are empty of JavaScript. If it helps to get rid of the problem, it's alright to get hands a little dirty!.