How do I adjust the size of the pop up calendar on the date picker field?

I'd like to make the pop up calendar on the basic date picker about the size of the yellow box. I cannot figure out how to do that. Can you please help? I'm sure there is some css I can use but I just don't know what it is. Thanks!

Hi Hayley,

Thanks for reaching out to Jotform Support. You can inject the CSS code below into your form to adjust the size of the calendar:

/*Reduce the size of the calendar*/

.calendar.popup {

    width:170px!important;

}



.calendar-new-month {

    padding-right: 8%;

    font-size: 12px;

    width: 56%;

}



.calendar-new-year {

    font-size: 12px;

}

.calendar.popup table tbody td {

    padding: 4px 4px!important;

}



.calendar-new-header .button {

    height: 27px;

    background-size: 7px;

}

Let me walk you through it:

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
2. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

That's it. Here's the result:

Give it a try and let us know if you need more adjustments.

Thank you!!