How to change the layout of my form for mobile

I've tried using the responsive option in designer and some css but cant get the design look I'd like.

On smaller screens I would like the form to line up vertically with each field under the other and all the same width.

My suggestion would be to check this guide: How To Make Mobile Friendly Forms on JotForm

The reason why is because if you only check the option in the Designer, you will get only some of the styles applied, while if you click on both the option in the designer and in the form builder, you will have more of them applied.

If you wish, we could assist with the CSS as well, but please do let us know what is the resolution that you wish to have the mobile versions started at? I presume that it would usually be the standard ones, but since the form is wider than longer, I want to check with you just in case before we start.

I'd rather do it with CSS, I'm making a mess of the code though.

on a mobile id like the form to be

please select

start date

start time

end date

end time

email

submit

with all of those fields the same width, so that it looks very uniform vertically ona mobile as oppose to horizontal on a full screen.

Hi,

I'm currently checking on a custom CSS for your form. Please give me more time. I'll reply here as soon as I have it working. 

Hi,

 

Can you try injecting the custom CSS below?

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

.form-section.page-section {

padding: 10px;

}

#input_80,#id_47,#id_170,#id_171,#input_168 {

width:100% !important;

margin-left: 0px !important;

}

.date-separate {

display: none;

}

.form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown {

max-width: 100% !important;

}

#input_171 {

height: 30px !important;

line-height: 25px !important;

padding-left: 0px !important;

width: 100% !important;

}

#hour_47, #hour_170 {

width: 100% !important;

max-width: 20% !important;

position: absolute;

left: 100px !important;

top:5px;

height: 30px !important;

}#min_47, #min_170 {

width: 100% !important;

max-width: 20% !important;

position: absolute;

left: 170px !important;

top:5px;

height: 30px !important;

}

li#id_171 {

top: 20px;

}

 

}

You can check the cloned form here: https://form.jotform.com/53128331243951. 

To inject a custom CSS, you can check the article here: How to Inject Custom CSS Codes. 

 

Do let us know if you need further assistance.

Regards.

Thanks for that, its looking better, how do I get the date time field to be the same width as the other fields, and decrease the gap between the 2nd date and email field?

Hi,

 

To increase the width of the date time field you can add the custom CSS code below in your form inside the @media only screen and (max-width: 480px){} CSS code that I have provided above.

#lite_mode_47, #lite_mode_170{

    width: 140px !important;

}

Also, you need to adjust/edit the position of the time field by adjusting the left property in the CSS code that I have provided above.

#hour_47, #hour_170 {

    width : 100% !important;

    line-height : 25px !important;

    max-width : 20% !important;

    position : absolute;

    left : 155px !important;

    top : 5px;

    height : 30px !important;

}

#min_47, #min_170 {

    width : 100% !important;

    max-width : 20% !important;

    position : absolute;

    left : 215px !important;

    top : 5px;

    height : 30px !important;

}

 

To decrease the gap between the 2nd date and email field please remove the CSS part below in the CSS code I have provided.

li#id_171 {

    top: 20px;

}

 

Do let us know if you need further assistance.
Regards.

Thanks, its looking much better, can you tell me what I need to put in to reduce the space before the submit button please?

Hi,

 

To reduce the space before the submit button please try to add the custom CSS code below in your form inside the @media only screen and (max-width: 480px){} CSS code that I have provided above:

button#input_168 {

    margin-top: 0px !important;

}

 

Do let us know if you need further assistance.
Regards.