Input fields are off the screen on mobile in portrait orientation

The first two input fields are not visible on the screen when using form on mobile.

Hi,

I have cloned your form and reproduced the issue. Width of the first two fields are far too much to fit in a mobile screen and they slide far right because of that. 

In the cloned version of your form I added our Mobile Responsive widget. Please see how it looks like on mobile after that:

Text boxes are now aligned to their respective headlines and their width are now fit to the mobile screen. Please try this widget:

Do let us know if the issue still persists. Thank you for contacting us. 

I created a new page at segregationholding.con/guru-index-new.html and added the widget. It didn't fix the problem. I inserted some CSS that also did not help: 

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {

li#input_5 {width: 100px !important;} li#input_4 {width: 100px !important;}

form-all { width: 100%; color: black; background-color: #d2232a;

}

}

Can you try to add the CSS codes below to your form and check the result, please?

@media (min-width : 304px) and (max-width: 717px){

    #label_5, #label_6, #label_4 {

        width : 23% !important;

    }

    #id_6 {

        width : 100%;

    }

    #cid_5, #cid_6, #cid_4 {

        width : 75% !important;

    }

    .form-all .form-submit-button {

        height : initial !important;

    }

}

You might need to remove the Mobile Responsive widget to avoid conflict. 

Or, you can also try to add the codes above to the codes on your website instead within <style></style>.

Thank you.