Struggling with a CSS and Bootstrap issue, I am unable to find a solution. The problem I am facing is that the content in a div form is not responsive within its parent div. It always extends beyond the parent div and does not adjust its size when the screen size is changed for different devices. Inside a div class wrapper, there is a navigation and a 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>
Within the div content, there is one row containing 3 div columns. The middle column is where the issue lies.
<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 code is as follows:
.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;
}
View on a desktop screen size: https://i.sstatic.net/wakQ0.png
View on a small laptop size: https://i.sstatic.net/1t2Yl.png The div content is not responsive and extends beyond.
View on a tablet: https://i.sstatic.net/0nU4I.png
View on a mobile device: https://i.sstatic.net/ytE02.png
The issue seems to persist due to the form not being responsive to screen size changes. I have attempted to adjust the Bootstrap grid columns to no avail. As my frontend experience is limited, I am seeking assistance on how to address this problem. Please help me find a solution.