Bootstrap datepicker adjust position and size on small browser screen

Question

My Bootstrap datepicker currently displays at the bottom left of the textbox, thats ok in a normal browser window. But the issue comes when the browser window is made small or resized. I want to make the datepicker display top left when the browser window is made small . Also on small screen I want the datepicker to become small also , but it should be readable and should also look good

Any help would be greatly appreciated

Answer 1

You want to use CSS media queries for different resolutions. eg.

@media (min-width: 768px) {
    .some-class {
        float: right;
        width: some_width;
        height: auto;
    }     
}

@media (min-width: 481px) and (max-width: 767px) {
    .some-class {
        float: left;
        width: some_smaller_width;
        height: auto (or some specific height);
    }
}

more: w3schools/mediaqueries