Input Field Width is too Small for Date & Adobe Sign Widget

Building my first form, and I am having a consistent issue with the field width of the date and the Adobe Sign widget email line in my custom 'fill in the blank' form.  

https://form.jotform.com/202314030418035

On mobile & tablet portrait, they're perfect.  On mobile landscape, tablet landscape, and desktop, while you can click into them, both are too narrow to see the inputs. 

While I will be iFrame embedding this into a site, I'm seeing this issue in the preview window in JotForm as well as the test site.  

TIA for any assistance!

Thank you for reaching support,

Can you please reset the theme by temporarily enabling a different them and placing it back to the Default theme?

Here is a screencast:

I hope that helps.

Best.

Hello!  That worked for the Adobe Sign Widget, but the date field is still having the width issue.  

Hi there,

I have made customizations on the form and here is how it looks:

If that is acceptable, kindly insert these codes into your Inject Custom CSS Area: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

span#id_1598278992322-date {

    width: 12% !important;

}

input#lite_mode_1598278992322-date {

    width: 80% !important;

}

I hope that helps.

Best.

Kenneth, thank you!  I added the code, but it appears to have transferred the problem from the mobile and tablet landscape and the desktop views to both mobile views and the tablet portrait views.  (Exactly the opposite of the first bug.)

Should I be using a different text and date element, or have I created the form in such a way as to prevent the fields from performing the same in all views?

Hi there,

After editing it here is how it looks on mobile:

And here it is on a tablet:

If that is okay with you, kindly place these codes below the ones I gave you earlier:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

   span#id_1598278992322-date {

    width: 38% !important;

  }

}

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (-webkit-min-device-pixel-ratio: 1) {

span#id_1598278992322-date {

    width: 14% !important;

  }

}

I hope that helps.

Best.

Kenneth, that works for me!  Thank you SO MUCH for your assistance!