Forums

8.4.1 How to style DateTime picker on mobile?

Permalink
The DateTime picker widget seems to have like a col-xs-2 width or something because all its inputs go one under another on small screens and I can't make them line up in one line or to make at least the date input itself to stretch full width and make the hours and minutes to go under and full screen width on mobile.

Does anyone know how to change the widget style for full width on mobile? Or is there a css setting hidden anywhere in the Elemental theme which I can change?

Thank you.
linuxoid
 
linuxoid replied on at Permalink Reply 1 Attachment
linuxoid
Any ideas?

See how the datetime picker appears on mobile (attached), it's not responsive styling.

I can force the individual input widths to certain lengths but only up to 768px. But on <767px the hour, the colon and the minutes go one under the other and I can't do anything about it.
linuxoid replied on at Permalink Reply
linuxoid
Here you are:
.ccm-input-date { width: 50% !important; }
@media (min-width: 768px) and (max-width: 991px) {
    .ccm-input-date { width: 40% !important; }
    #pickup_date_h, #pickup_date_m, #dropoff_date_h, #dropoff_date_m {
        width: auto;
    }
}
@media all and (max-width: 767px) {
    .ccm-input-date { width: 40% !important; }
    .form-inline .form-control { 
        display: inline-block !important;
    }
}
linuxoid replied on at Permalink Reply
linuxoid
The above works in a block but doesn't work on a single page. Do you know why?