Adjust form for mobile

  • Bali-Chris
    Asked on January 20, 2019 at 8:30 AM

    Hi there,

    I would like to do the following things for my form on mobile only:

    1.) Reduce the image size on top
    2.) Move the dropdown boxes to the right
    3.) Change dropdown background color from grey to white (Why is it not the same as on desktop?)
    4.) Change background color on top to #D6EEF0 (Where does this color come from? I don't have it on desktop)

    Thanks for your help in advance!

     

    Kind Regards,

    Chris

    1547990965desktop form accomodation sear Screenshot 10

     

    1547990994mobile form adjustments accomm Screenshot 21

  • Donald_H
    Replied on January 20, 2019 at 9:34 AM

    Inject the following CSS into the form, it should solve all the issues mentioned above. I have cloned your form and made changes here: https://www.jotform.com/90193414942962;

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

    div.form-header-group {

        background: #d6eef0 !important;

    }

    .form-col-1 {

        float: left !important;

        position: relative !important;

        width: 49% !important;

        margin-top: 10%;

    }

    .form-col-2 {

    float:right !important;

    position:relative !important;

    width: 49% !important;

    }

    .form-col-3 {

    float:right !important;

    position:relative !important;

    width: 49% !important;

    }

    .form-col-4 {

    float:right !important;

    position:relative !important;

    width: 49% !important;

    }

    }


  • Bali-Chris
    Replied on January 20, 2019 at 7:08 PM

    Thanks a lot for the CSS. If looks much better now! 

    But the background of the dropdowns is still grey instead of white. Is this an issue with safari for iOS? 

  • Kiran Support Team Lead
    Replied on January 21, 2019 at 12:31 AM

    As I check the form, the CSS seems to be correct and working normally on Android and PC. However, the dropdown is displayed with gradient in iPhone which seems to be an issue with iOS itself. The other form with default dropdown menu is displaying with gradient effect on iPhone. 

    Thank you!