Form not responsive

Afternoon

I've created a form from the default template and ticked the box, but it doesn't resize for mobile. the columns become too small for input?

https://www.ukgirlthing.co.uk/activity-only/bubble-football

Also, I've removed the phone number and replaced it with a plain text box field called phone number, but the original is still showing on the form on the web page?

Is there anything i can do?

Thanks

Matthew

Hello Mattew,

1. The single textbox phone number appears of be showing on your page now. Could be a delay on form update but it should be fixed now.

2. With regards to the responsiveness of the form, note that JotForm is responsive by default. What causes your form not to expand on mobile is the custom CSS codes injected to your form. See the following image:

So to fix this, you have to make the width 100% when form is viewed on mobile. Inject this CSS codes to your your form.

@media screen and (max-width:480px){

#id_3, #id_6, #id_4, #id_8, #id_9, #id_15, #id_11, #id_12, #id_13, #id_14, #id_16, #id_20 {

    width: 100%;

}

[data-type="control_datetime"] span.form-sub-label-container {

width: 28%;

    margin-right: 0;

}

[data-type="control_time"] span.form-sub-label-container {

    width: 30%;

}

#id_5 {width: 100%;}

#id_21, #id_17 {

    width: 100% !important;

}

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it into the botom section)

This should give you the following result:

Hope this helps!

Your support team are great - even worked up the code for me, thanks!

I've added it in though, and it still performing the same?

Anything else I need to do?

thanks

You are correct, this can be fixed by adding the "!important" property to the code my colleague provided, so replaced it for this one:

@media screen and (max-width:480px){

#id_3, #id_6, #id_4, #id_8, #id_9, #id_15, #id_11, #id_12, #id_13, #id_14, #id_16, #id_20 {

    width: 100% !important;

}

[data-type="control_datetime"] span.form-sub-label-container {

width: 28% !important;

margin-right: 0 !important;

}

[data-type="control_time"] span.form-sub-label-container {

    width: 30% !important;

}

#id_5 {

width: 100% !important;

}

#id_21, #id_17 {

    width: 100% !important;

}

}

Result: https://form.jotform.com/61684927481972 

Let us know if you need more help.

Perfect!  thanks so much.

you guys have the best support team - so fast!

In behalf of my colleagues, you are most welcome. We're glad that the custom CSS codes worked for you.

Should you need our assistance again, please do not hesitate to contact us here.

Thank you.