How responsive input form in bootstrap - css

Question

I get one problem with some css and bootstrap, i still not find solution
the problem is div form content not reponsive by its parent div and always move div content outside of parent div and not adjust by parent div size when i change screen size for multiple devices.
I have one dive classs wrapper and inside it there are one nav and one div content
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar" >
</nav>
<div id="content">
<div class="row main">
<div class="col-lg-3">
</div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 trade">
</div>
<div class="col-lg-3">
</div>
</div>
</div>
in div content , there are one row , inside row , there are 3 div columns , in middle column , there one row that has problem .
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 trade">
<div class="tab_container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<form>
<div class="input-wrapper">
<div class="prefix">Price</div>
<input type="number" id="price" placeholder="Price">
<div type="text" class="css">Last</div>
<div class="suffix">USD</div>
</div>
</form>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<form>
<div class="input-wrapper">
<div class="prefix">Price</div>
<input type="number" id="price" placeholder="Price">
<div type="text" class="css">Last</div>
<div class="suffix">USD</div>
</div>
</form>
</div>
</div>
</div>
</div>
its css is
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#content{
width: 100%;
padding: 14px;
min-height: 100vh;
}
.tab_container{
padding:1px;
display:none;
}
form{
background-color: #ffffff;
border-radius: 10px;
}
.input-wrapper{
display: flex;
background-color: #222020;
border: 1px solid #7b7b93;
margin: 10px 0;
border-radius: 5px;
}
.prefix,
.suffix{
color: #7b7b93;
}
.prefix{
padding: 3px;
width:50px;
}
.suffix{
width:60px;
padding:2px 0px 0px 8px;
}
.css,.cdd{
padding:2px ;
color:#f5f5f8;
}
input{
background-color: transparent;
text-align: right;
color: #f5f5f8;
width:110px;
}
here is desktop screen size
here is small laptop size
div content not responsive and move outside
here is tablet view
here is mobile view
it not adjust by parent div size ...
I first think it may be bootstrap grid problem , i changed for various device columns , not ok .
may be due to form responsive problem , this form not change when screen size change .
my experience too low in frontend , please help me , How can i fix that

Answer 1

Try to switch up the sizing of your bootstrap columns and div classes.
For example, you have applied a 60px width to "suffix". On a smaller device that displays less pixels on the screen, it could struggle to show 60px of "suffix" content whilst also trying to display the rest of the page.
Suffix should really be set to % rather than px. You would apply px to the column itself then define how much % suffix should take up inside the column.
I'm not an expert with grids and bootstrap and run in to similar issues, but I recommend you try out Webflow - it's free to use and allows you to generate these grids yourself, responsive to all screen sizes. You can then take the code from Webflow and apply it within your own website you're having problems with.