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

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

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. 

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.

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.