The date field is not responsive in mobile phone

  • Profile Image
    chinkok
    Asked on November 13, 2016 at 02:55 AM

    Noted this minor format issues; move up the respective MM/DD/YYYY one step up will be good, see screenshot from mobile phone. Please help fix this, thanks.

     

  • Profile Image
    Jan
    Answered on November 13, 2016 at 12:54 PM

    If you want to just remove the ("-") below the Date field, you can inject this CSS:

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

    span.date-separate {
      display: none !important;
    }

    }

    But if you want to arrange the Date field into 1 row, please use the CSS code below:

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

    span.date-separate {
      display: none !important;
    }

    #cid_8 .form-sub-label-container:nth-child(1),
    #cid_8 .form-sub-label-container:nth-child(2),
    #cid_8 .form-sub-label-container:nth-child(3) {
      width: 28% !important;
    }

    #cid_8 .form-sub-label-container:nth-child(4) {
      width: 8% !important;
    }

    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.