How to make this input element responsive for lower resolution screens? - html

Question

Here is the html of the input element I'm trying to make responsive.
I'm trying to make the input responsive for lower screen resolutions like 1200 X 600. Here is the CSS for this HTML.
.demo {
position: relative;
width: 100px;
}
.demo i {
position: relative;
bottom: 14px;
right: 24px;
top: auto;
c cursor: pointer;
}
<div class="row" style="padding: 25px">
<div class=" ">
<p>Date Range</p>
</div>
<div class="col-lg-2 col-md-2 demo" style="top :-7px">
<input type="text" class="form-control" style="cursor: pointer" name="daterange" value="01/01/2018 - 01/01/2050">
<!-- <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> -->
</div>
</div>

Answer 1

Use col-2 instead of col-lg-2 col-md-2
What means it apply to all screen sizes(from xs to lg)
.demo {
position: relative;
width: 100px;
}
.demo i {
position: relative;
bottom: 14px;
right: 24px;
top: auto; c
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row" style="padding: 25px">
<div>
<p>Date Range</p>
</div>
<div class="col-2 demo" style="top :-7px">
<input type="text" class="form-control" style="cursor: pointer" name="daterange" value="01/01/2018 - 01/01/2050">
<!-- <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> -->
</div>
</div>