How to prevent input fields from stretching beyond it's parent's width on small devices?

Question

I have the following:

form {
 border: 1px solid #666;
}

<form action="#" method="post">
      <p>
        <label> Your name<br>
          <span>
            <input name="your-name" value="" size="40" type="text">
          </span>
        </label>
      </p>
      <p>
        <label> Your telephone<br>
          <span>
            <input name="your-tel" value="" size="40" type="tel">
          </span>
        </label>
      </p>
      <p>
        <label> Your email<br>
          <span>
            <input name="your-email" value="" size="40" type="email">
          </span>
        </label>
      </p>
      <p>
        <label> Subject<br>
          <span>
            <input name="your-subject" value="" size="40" type="text">
          </span>
        </label>
      </p>
      <p>
        <label> Attachments<br>
          <span>
            <input name="your-file" size="40" type="file">
          </span>
        </label>
      </p>
      <p>
        <label> Your message<br>
          <span>
            <textarea name="your-message" cols="40" rows="10" ></textarea>
          </span>
        </label>
      </p>
      <p>
        <input value="Send" type="submit">
      </p>
    </form>

The CSS is just to help visualizing the error, which is: on small screens (320x480) the <input>s stretch beyond the form boundaries. Considering that I can't change the HTML, how can I prevent this?

For instance, I tried inserting "max-width: inherit" in each <label>, <span> and <input>, and then setting the <p> max-width to 200px, which worked like a charm, but obviously would impact the layout on larger screens. I then tried changing this max-width to 100%, but it just became the same as before.

`max-width: 100%; box-sizing: border-box;` works good with me .. as you need to consider border and padding — Temani Afif, Feb 16 '18 at 13:42
@TemaniAfif I tried it, but with padding things break again. — Metalcoder, Feb 16 '18 at 13:59
so show un the full code then .. as with your actual code it works fine — Temani Afif, Feb 16 '18 at 14:06
@TemaniAfif it's a production webpage with lots and lots of CSS... I'll try to make this snippet more like the real code, but to simply dumping it all here would be really hard. I'll do it in a couple hours. — Metalcoder, Feb 16 '18 at 14:10

score -2 · Answer 1 · edited Feb 16 '18 at 15:22

-2

Try this, although you should maybe name your form

<form name="FormName" form action="#" method="post">

</form>

CSS

form {
    max-width: auto;
}

edited Feb 16 '18 at 15:22

YakovL

7,557
12
62
102

answered Feb 16 '18 at 13:49

James24

73
4
12

My code is just a simplification from the original issue, so I removed it's name to avoid cluttering. Anyways, Firefo dev tools complains that the `auto` value is invalid. – Metalcoder Feb 16 '18 at 13:53

How to prevent input fields from stretching beyond it's parent's width on small devices?

1 Answers1