Adjust form for mobile

  • Profile Image
    Bali-Chris
    Asked on January 20, 2019 at 08: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

     

    1547990994mobile-form-adjustments-accomm

  • Profile Image
    Donald_H
    Answered on January 20, 2019 at 09: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;

    }

    }


  • Profile Image
    Bali-Chris
    Answered on January 20, 2019 at 07: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? 

  • Profile Image
    Kiran
    Answered 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!