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

Question

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

299 Views Asked by ti saigon At 27 December 2021 at 03:55

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

Original Q&A

There are 3 best solutions below

ksav On 27 December 2021 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>

lakshna S On 27 December 2021 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>

**L. Alejandro M.** · Accepted Answer · 2021-12-29T02:00:21.830000

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

There are 3 best solutions below

Related Questions in HTML

Related Questions in FORMS

Related Questions in W3.CSS

Trending Questions

Popular # Hahtags

Popular Questions