Make mobile friendly html form

Question

I have an buy and sell forms with price etc.. It looks perfect in laptop but as I try to see it through my iphone, I only see sell button and three input areas. Here is my Css:-

#ordersell {
background-color: #a82226;
}

.orderbutton {
text-align: center;
display: flex;
color: #fff;
margin: 0 10px;
vertical-align: middle;
justify-content: center;
align-items: center;
width: 50px;
height: 30px;
line-height: 30px;
text-decoration: none;
font-weight: 700;
cursor: pointer;
border-radius: 3px;
}

*, ::after, ::before {
box-sizing: border-box;
}

form {
 border-style: groove;
 padding: 10px;

}

.input101 {
font-family: Poppins-Medium;
font-size: 15px;
line-height: 1;
color: #666666;
display: block;
width: 75px;
background: #e6e6e6;
height: 40px;
border: 1px solid #666;
}

label {
display: block;
font-family: "Comic Sans MS", cursive, sans-serif;
color: #09cdf9;
}

#orderbuy {
background-color: #22a826;
}

And this is my HTML code:-

<div style="display: flex;">
<form method="post" action="usdbtc.php" class="login100-form validate-form" style="width: 500px; height:160px; float:left;">    
<p>
<label style="float: left;">Price:</label>
<input class="input101" style="width: 135px; float: left;" type="text" name="username" id="box1" oninput="calculate()">
<label style="float: right;">: BTC</label>
<input class="input101" style="width: 135px; float: right;" type="text" name="username" id="box2" oninput="calculate()"><br>
<input class="input101" style="width: 135px; float: right;" type="text" name="username" id="result"><br>
<label style="padding: 10px;">Total BTC:</label>
<td rowspan="2"><br>
<span class="orderbutton" type="submit" id="ordersell">SELL</span>
</p>
</td>
</form>
<form method="post" action="usdbtc.php" class="login100-form validate-form" style="width: 500px; height:160px; float:right;">
<p>
<label style="float: left;">Price:</label>
<input class="input101" style="width: 135px; float: left;" type="text" name="username" id="box3" oninput="calculate()">
<label style="float: right;">: BTC</label>
<input class="input101" style="width: 135px; float: right;" type="text" name="username" id="box4" oninput="calculate()"><br>
<input class="input101" style="width: 135px; float: right;" type="text" name="username" id="resul"><br>
<label style="padding: 10px;">Total BTC:</label>
<td rowspan="2"><br>
<span class="orderbutton" type="submit" id="orderbuy">BUY</span>
</p>
</td>
</form>
</div>

Any ideas how to show it properly in Mobile display? It appears that whenever the screen size goes below 600px , it tends to happen. Help is appreciated.

Answer 1

Using @media rules can help to make your design responsive. But looks like you are using inline css as "style="width:50px;height:50px"

You have to give id or class to the respective div(s) or html elements so that you can make them responsive as below:

For displays less than 600px, all you have do is add css inside media like:

@media only screen and (max-width:600px){
   /* then insert your css elements  */
   .yourclass{
    width:100%;
  }
   .yourid{
  width:100%;
  }
  input[text]{
  width:100%;
  background:green;
}
/*etc*/
}

For Example, here's the jsfiddle : http://jsfiddle.net/s4yeof9c/ Try resizing

Hope this helps :)

@media only screen and (max-width:445px){
/* all css here goes for mobile .. i'm not sure about how much pixel though :D */
}

@media only screen and (max-width:800px){
/* all css here goes for tablets */
}

@media only screen and (max-width:1366px){
/* all css here goes for screens with 1366px */
}

and so on..