Jump to content

Make Calendar Popup Larger?

Recommended Posts

Hi all,


I am using the code to make a datapage more responsive, and while it works wonderfully, I don't know how to make the calendar popup larger to be usable on mobile.



When I click on the calendar it shows up but it is way to small to be mobile friendly.


Below is what I have for the responsive code.


I've been searching styles to try and find out how to change the popup but have been unsuccessful.


Any and all help is much appreciated!

<!-- Responsive Code Begin -->
/* Change max-width to what size you want the form to change at */
@media (max-width: 767px) {

  #datapage-form table { width: 100% !important; margin-top: 1px !important;  }
  #datapage-form td { display: block; }

  img[alt~="Calendar"] {
    position: relative; top: -5px;

<div id="datapage-form" >
<!-- Responsive Code End --> 
Link to comment
Share on other sites

table.NavBar tbody td {
font-size: 18px!important;

#CalendarToolBox > div > table.NavBar > tbody > tr > td:nth-child(7) {
  width: 55px!important;

The second part adjusts the width of the year column, which by default is at 30px, but becomes too small if the font size is increased too much. 

Link to comment
Share on other sites

  • 6 years later...
  • 1 year later...

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.

Reply to this topic...

×   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...