Adjust responsive width for calendar so view changes are better

[DesiLogi]

Hi,

Does anyone know if/how to change the responsive setting for 'tablet' view from the 1024px to something lower like 800px? A calendar datapage is really not good in responsive mode because it changes from full view to a slim list when less than 1024px. This gives a bad UX because you might have a screen 1050px or so and the calendar goes responsive from full month view with blocks to a mobile 'list' that the user has to scroll a lot to see the entire date range. LOTS of white space to scroll past, with this method. 

It would be great if one could change the setting for 'tablet view' from < 1024px to something like < 800px. I don't see anywhere in the Styles to do this--is it possible? 

Thanks for any help-

[Volomeister]

Hi @DesiLogi

You can add this code to the header of your calendar page to change layout of the calendar

<style>
@media only screen and (min-width: 577px) and (max-width: 1024px) {
section[class^="cbFormSection"], section.cbCalendarReport, nav.cbCalendarNavBarPanel, .cbAuthSimpleOuterTable, .cbAuthSidebarOuterTable {
display: grid;
}
</style>

It will look something like this on screens from 577 to 1024px wide:

[DesiLogi]

Hi @Volomeister,

Thanks for the CSS on this--it does make the calendar more efficient in tablet view. However, the event boxes themselves get elongated with a lot of padding at the bottom. To be usable the events would need to be more compact since their narrowed (see attached). I realize each event is being stretched to match the length of the day, and the day is stretched to match other days with multiple events. But it ends up looking strange and would be better if each event were the same height (like in the pic's day 13th  or 14th being the same height as each event in the 12th--basically standardizing the event height. Is this possible?