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


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



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;
}




Date Range







</div>





You are giving a fix width to .demo, then there is no benefit of using col-lg-2 or any other class for grid.
– Atul
Jul 3 at 8:04




1 Answer
1



Use col-2 instead of col-lg-2 col-md-2


col-2


col-lg-2 col-md-2



What means it apply to all screen sizes(from xs to lg)


xs


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">
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js



Date Range







</div>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

PHP contact form sending but not receiving emails

PHP parse/syntax errors; and how to solve them?

iOS Top Alignment constraint based on screen (superview) height