Make Appointments+ more responsive

STAFF Notes: member would like to have the dropdown selects stack while in mobile view:

I added this custom CSS to Appearance > Custom CSS:

@media only screen and (min-device-width : 320px) and (max-device-width : 500px) {
.appointments-list table th {font-size: 0.4em;
}
.app_services_dropdown, .app_workers {
font-size: 10px !important;
}
select#app_select_services, select.app_select_workers, input.app_workers_button, input.app_services_button {
    font-size: 12px !important;
}
  .appointments-wrapper, .appointments-legend, .appointments-pagination {
    width: 85%;
}
}

It improves it but doesn't make the dropdowns stack. May need to remove all the table tags in text editor.

  • Chris

    Many thanks to the tech support that helped me on this today. I thought a little deeper through this and was able to come up with a solution that does everything I need, and more. Although I think it is worthwhile providing better responsive behavior in this plugin, here is what I did to make it BEAUTIFUL!

    My theme uses VC, so I set up rows and columns in VC and pasted the individual shortcodes into a text element in each row/column as shown in this grab.

    Then I wrote some CSS to target those dropdown and buttons, gave them a width of 100%.

    The result works nicely for me.

    Cheers!
    Chris