form input columns in same line: dont line break in Mobile view

Question

i have 2 field: name and phone number.

In laptop, display same line but in Mobile view display 2 rows

How can 2 fields input (name and Phone) display same line in Mobile like Laptop?

My current code: https://jsfiddle.net/bvotcode/eLh36azt/4/

    <body>

<form action="/action_page.php" target="_blank">

<div class="w3-center w3-padding-16" style="margin-top:0px">
<div class="w3-row">
<form action="/action_page.php" target="_blank">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
        
            <div class="w3-half">
              <input class="w3-input w3-border" type="text" placeholder="first last name" name ="hovaten" required/>
            </div>
            <div class="w3-half">
              <input class="w3-input w3-border" type="text" placeholder="phone number"  name="handynumber" required/>
            </div>
</div>
       <button class="w3-button w3-green w3-section w3-center" type="submit"> Submit</button>
</form>
</div>
</div>
</body>

Thank you

Well, if there isn't room for two text fields, it has to split them, right? — Tim Roberts, Dec 27 '21 at 03:57
@tim roberts i want always 2 columns in laptop and mobile. Dont split. Ony 2 text field: name and phone number. thanks — ti saigon, Dec 27 '21 at 09:41
It's not up to you. If the screen is too narrow, the browser will put the second on the next line, That's how HTML works. — Tim Roberts, Dec 27 '21 at 17:42

score 0 · Answer 1 · answered Dec 27 '21 at 04:12

label {
  display: block;
}

@media screen and (min-width: 769px) {
  .fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

<form action="/action_page.php">
  <div class="fields">
    <label>
    first last name
      <input  type="text" placeholder="first last name" name="hovaten" required/>
    </label>
    <label>
    Phone number
      <input type="text" placeholder="phone number" name="handynumber" required/>
    </label>
  </div>

  <button type="submit"> Submit</button>
</form>

score 0 · Answer 2 · answered Dec 27 '21 at 14:59

Try using this bootstrap code:

<div class="row">
<div class="col">
  <input type="text" placeholder="first last name" name ="hovaten" required/>
</div>
<div class="col">             
  <input type="text" placeholder="phone number"  name="handynumber" required/>
</div>
</div>

score -1 · Accepted Answer · answered Dec 29 '21 at 02:00

The main part of your example could be:

    <div class="w3-row">
          <div class="w3-col" style="width:50%;padding:2px">
            <input class="w3-input w3-border" type="text" placeholder="first last name" name ="hovaten" required/>
          </div>
        <div class="w3-col" style="width:50%;padding:2px">
          <input class="w3-input w3-border" type="text" placeholder="phone number"  name="handynumber" required/>
        </div>
    </div>

In this way, each field will always be half the width of the screen.

Saludos,

form input columns in same line: dont line break in Mobile view

3 Answers3