How can I get the attached form to be correctly aligned with all the boxes same size and fit on to mobile phone screen?

https://form.jotformeu.com/62383912423353

I've checked your form and I can verify that it is not responsive. It is because you specified the fields in pixels using CSS. Please give me more time about this issue. I will contact you once I have a solution. Thank you for your patience.

Thank you Jan I am very new to this and appreciate your help

Regards

John

Thank you for patiently waiting. I cloned your form and delete all the CSS on it. After that, I removed the 50000px width of the 3rd matrix table (Group C) and then resize TextArea Autosize widget. Here's the link of the cloned form: https://form.jotform.com/62415351286959. You can clone it if you like.

Here's a guide on how to fix the form:

1. I removed the Table Width of the 3rd Matrix table (Group C). Select the field and then click the properties icon. Go to the Options tab and remove the value 50000px. After that, click the Save Changes button.

2. Insert the Mobile Responsive Widget on the form.

3. Change the width of TextArea Autosize widget to 383px. Select the widget and then click the gear or properties icon. Change the width to 383. 

4. Go to the Form Designer.

5. Under the Design tab, go to the Form Layout section. After that, please enable the "Make this form responsive" option.

6. In the Form Designer, go to the CSS tab and delete all the CSS code.

7. Please paste the custom CSS code below in the CSS editor.

li#id_1, li#id_3, li#id_4, li#id_5, li#id_6, li#id_7, li#id_8, li#id_9, li#id_11 {
width : 100% !important;
}

.form-input-wide.jf-required {
width : 100% !important;
}

.form-matrix-table {
max-width : none !important;
}

.form-line {
width : 100% !important;
}

.form-section.page-section {
width : 100% !important;
}

@media screen and (max-width: 768px) and (min-width: 480px){
.form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
width : 100px !important;
}
}

@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-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
width : 100px !important;
}
}

iframe#customFieldFrame_11 {
width : 100% !important;
}

.span_print {
color : #353839;
}

#input_2 {
color : #353839;
}

.form-label.form-label-top {
color : #436CB9;
text-align : left;
}

.form-dropdown {
width : center;
border-radius : 12px;
height : 22px;
line-height : 22px;
box-sizing : 2px;
border-width : 32;
}

.form-section.page-section {
text-align : left;
}

.form-line {
color : #436CB9;
}

.form-submit-button {
color : #436CB9;
}

8. Save the changes and then preview the form.

Here's the result:

Hope that helps. Let us know if you need further assistance. Thank you.

Jan

Thank you ever so much that works perfectly and I followed your very clear instructions so as I can hopefully understand form creation a bit more.

Many thanks for all your efforts

Best wishes

John

You're welcome. Glad to hear that the solution I provided resolved your issue. If you need any help, let us know. Thank you.