Jump to content
  • 0

Adjust responsive width for calendar so view changes are better




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-

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Hi @DesiLogi

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

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

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

Link to comment
Share on other sites

  • 0

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? 



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...