Date picker: How to adjust the widths of the text boxes

Hi, how can you change the text box sizes for the date field? It looks wrong on the page and is overlapping with the separator? 

On the mobile format it looks even worse? 

I need it to show 2 digits for the day and month and then 4 digits for the year? 

Can you help? 

Thanks in advance. 

You can add the following CSS code:

#day_6, #month_6, #year_6{

  border: 0;

  width: 25px;

}

 #year_6{

   width: 50px;

 }

How-to-Inject-Custom-CSS-Codes

It will look like this:

You can view a working demo here:

https://form.jotform.com/81074585537969

Hi Aubrey, 

That's really helpful, thanks for your response. It has worked on the web and tablet versions of the form but the mobile version is still shrinking the day field too much for some reason? 

Do you know any way around this? 

Thanks, 

Hey,

If you add the media queries below, the result will look like this:

@media screen and (max-width: 768px){

    #day_6, #month_6, #year_6 {

        border : 0;

        width : 25px !important;

    }

    #year_6 {

        width : 50px !important;

    }

    #cid_6 .form-sub-label-container:nth-child(2) {

        /*margin-right : -1px !important;

        */

        margin-left : 18px !important;

    }

    #cid_6 .form-sub-label-container:nth-child(4) {

        margin: 5px -20px 7px 11px !important;

    }

}

@media screen and (max-width: 640px){

    #cid_6 .form-sub-label-container:nth-child(2) {

        margin-right : -45px !important;

    }

}