Why does my form not work properly on the mobile version of my site?

  • Profile Image
    one2oneneil
    Asked on June 30, 2020 at 11:02 AM

    Hi there.

    Does anyone know why the mobile version my form isn't working right?


    I am trying to do a multiple selection section against my Savoury snacks, and its not displaying all the options that I'm looking for. All my info seems to be against the left hand side of the screen and is cutting off my selections.


    Any help would be much appreciated.


    Neil

  • Profile Image
    ashwin_d
    Answered on June 30, 2020 at 12:44 PM

    I did check your form in mobile device and it shows all the products left aligned and squeezed. Please inject the following custom CSS code in your form and see if that solve your issue of mobile view:

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

    span.form-product-item.hover-product-item {

        width: 100% !important;

    }

    }

    The following guide should help you how to inject custom CSS code in form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions or you need any other changes. 

  • Profile Image
    one2oneneil
    Answered on June 30, 2020 at 02:13 PM

    Hi there, thanks for getting back to me and your help.

     

    Its helped to un-squeeze the form down the left hand side, although I'm still having issues trying to display a drop down box that for a special offer. Its in the Savoury snacks section for Fava beans. It should be displaying a further option to select what products they want for the special offer.

  • Profile Image
    Mike
    Answered on June 30, 2020 at 04:56 PM

    I have added the next CSS to your form in order to improve the layout of the 'Sub-Product' items.

    @media screen and (max-width: 480px),
    screen and (max-device-width: 768px) and (orientation: portrait),
    screen and (max-device-width: 415px) and (orientation: landscape) {
    .form-line.card-3col div[data-wrapper-react="true"],
    .form-line.card-2col div[data-wrapper-react="true"] {
    flex-direction: initial;
    }
    }
    .form-product-item-detail {
    height: auto !important;
    }

    Please check the form again.