Multiple Issue Question

  • Profile Image
    craftlabph
    Asked on November 21, 2017 at 08:33 AM

    Q1: What CSS code should I inject to fix this overlapping label? This is on Page 6.

    1511270935Screenshot_2017-11-21-20-59-52

    Q2: How to move the date picker button a little bit to the right? This is on Page 1. I had 3 of this same date field with similar CSS codes for mobile on Page 2. However, it doesn't seem to work on this one.

    1511271102Screenshot_2017-11-21-21-22-04

    Q3: Using the same screenshot above, the date field has a Hover Description. I could view it using the browser version but I couldn't see it in the mobile version.

  • Profile Image
    Richie_P
    Answered on November 21, 2017 at 11:07 AM

    Hello,

    For Q1. you can add this css to align the text properly:

    .form-label.form-label-left {
         display: table-cell;
    }

    For Q2.and Q3 you can add this css to add margin-left and to view the form-description on small devices:

    @media (max-width: 480px){
      img#input_8_pick.showAutoCalendar{
        margin-left:10px; /* moves the calendar a little to the right*/
      }

    .form-description{
        margin-left:-500px !important;
        background-color:red;
        right:0px !important;
        margin-top:-50px;
      }
    }

    Here is the form I have created feel free to clone it :

    https://form.jotform.com/73243933816965

    Regards