Multiple Issue Question

  • craftlabph
    Asked on November 21, 2017 at 8: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 Screenshot 10

    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 Screenshot 21

    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.

  • Richie JotForm Support
    Replied 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