CODEWITHSUNDEEP
htmlcss
J. Doe
J. Doe

Reputation: 160

Inputs with border responsive failure

I want to create a new form with inputs. The 2 first inputs should be 50% so they are next to each other and the rest 100%. The boxes are next to each other at width 49% but on mobile screens, they stack under each other.

I added a JS Fiddle to demonstrate my problem.

<input class="inputstyle" NAME="name" placeholder="Name" style="width:50%;border:2px solid #000;" value="name">
<input class="inputstyle" NAME="lastname" placeholder="Last name" style="width:50%;border:2px solid #000;" value="lastname">
<input class="inputstyle" NAME="birthplace" placeholder="Birthplace" style="width:100%;border:2px solid #000;" value="birthplace">

And at 50% on computers it doesnt equal the 100% input

I'm grateful for any help!

Upvotes: 1

Views: 27

Answers (2)

Mi-Creativity
Mi-Creativity

Reputation: 9654

Alternatively, you can make use of CSS calc() function to subtract the border size from the total width like this:

JS Fiddle

.inputstyle {
  /* full width */
  width:calc(100% - 4px); /* 4px because 2px border left + 2px border right */
  margin-top:1%;height:30px;background-color:#FFF;float:left;
  border:2px solid #000;
}
.half-width {
  /* half width */
  width:calc(50% - 4px);
}
<input class="inputstyle half-width" NAME="name" placeholder="Name" value="name">
<input class="inputstyle half-width" NAME="lastname" placeholder="Last name" value="lastname">
<input class="inputstyle" NAME="birthplace" placeholder="Birthplace" value="birthplace">

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105873

you need as well to mind borders and padding eventually. box-sizing:border-box; will be usefull for this

https://jsfiddle.net/of1fL7bv/2/

Upvotes: 1

Related Questions