I am building one of those contact forms that are conversational. I have code that works but I don't think it is optimal (at the bottom). The form looks like: The code is live on this codepenThe problem I was solving was that the placeholder text on one of them is very large and would either break into two lines or if I gave it a fixed width, it would break the layout of smaller mobile phones. Yes, I understand the the very simple solution would be to propose a change to the copy for any instance, but going on the fact that it cannot be done, how would I solve swapping the text based on the device width.My proposed solution was to reduce the text on mobile. Since there they are more flexible with the mobile product, I can make these changes, but the desktop needs to comply with the PSD.HTML<input type=text id=org name= placeholder=ORGANIZATION OR COMPANY NAME>CSS#org{  display: block;  width: 96%;  margin: 0 auto;}@media only screen and (min-width: 768px) {  #org{    display: inline-block;    width: 360px;  }}It needs to be at least 360px to match the PSD for desktop. One other option that I have is if I have entirely different inputs, would that work? like <input type=text id=org class=orgm name= placeholder=ORG/COMPANY><input type=text id=org class=orgd name= placeholder=ORGANIZATION OR COMPANY NAME>.orgm { //mobile    display: block;}.orgd {    display: none;}@media only screen and (min-width: 768px) {  .orgm{      display: none;      width: 96%;      margin: 0 auto;  }  .orgd {      display: inline-block;      width: 360px;      margin: 0;  }}
Changing placeholder text with CSS only
css