Make a two column form thats lined up correctly on desktop and mobile

Hi there,

I have made a two column form for my local football club so we can track players statistics but I'm having trouble lining up the columns so it looks neater on the desktop mode and doesn't revert to single columns on mobile.

Is there a way to put the "home teams" stats to be left aligned and the "Away Teams" stats right aligned? At the minute each item is aligning differently. 

If that is possible is there a way to make sure these fields will stay that way on the mobile version as well?

I have attached my form so you can see it more clearly.

 

Cheers,

 

Marty

 

You can add this CSS code to your form to potion the fields in two columns:

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

   .form-line.form-line-column {

    width : 140px!important;

}

}

How to Inject Custom CSS Codes

Here is my demo form: https://form.jotform.com/72902286953969 

Feel free to test it and clone it.

I would also suggest you to check our Input Table field.

Hope this will help. Let us know if you need further assistance. 

Thanks a lot.
Is there anyway to make sure they are aligned neatly in the desktop version
like the mobile version is now?
I tried an input table but didn't like the style of it.
Cheers,
Marty
...

I saw that you changed the Theme of your form. On the desktop there is only the issue with one 'Contested Possessions' field.

To resolve this issue set the Label Aling of that field to Left.

You can also set the Label Align of all fields to TOP. 

Here is my new from: https://form.jotform.com/72903348753967 

Let us know if you need further assistance. 

Hey Bjoanna,
I have updated my theme and formatted my form so it works in desktop and
mobile perfectly except for the 3 drop down options.
"Home Team" and "Away Team" drop downs are next to each other neatly in the
mobile version but when in desktop mode they don't expand wide enough to
sit next to each other neatly filling the extra space.
The final drop down at the bottom of the form which is on its own line
expands full length horizontally in mobile but shrinks in all other formats
like desktop.
What css code do I need to input so all the drop downs expand properly
outside of mobile mode?
Cheers,
Marty
...

I'm afraid I wasn't able to make it work with CSS, apparently, the theme used in the form is overriding it so the drop-down width stays the same, actually its max-width parameter.

So with the theme applied, I'm not sure if it is possible to achieve that. It is a simple CSS, but on preview, the CSS of the theme overrides it.

So if I change the theme and that will fix the problem?
What CSS will I have to use on a new theme to make sure it's working correctly.
Sent from my iPhone
...

I would suggest you to please apply a new desired theme and then based on that we will help you with the required custom css code to achieve your requirement.

We will wait for your response.

Hi there,
I have updated to another theme and that has fixed my dropdown width issue.
Now when I select any of the input boxes on the right hand side of the form
they push the other boxes below them down one.
How do I enable them so when I choose a number box or dropdown not to
automatically move the other number boxes around?
Cheers,
Marty
...

I have cloned your form and working on it but it is taking a bit of time. I will get back to you on this soon.

Please take a look at the following cloned form and see if this works as expected:  https://form.jotform.com/72931197039967

I have moved the first column fields to a new line and that seems to have solved this issue. Please check the screenshot below:

Hope this helps.

Do get back to us if you need any other changes.

Thanks that seems to have fixed the issue.
...

Hi there,

I thought the issue was resolved but now that I have been trying out my form on my actual mobile not just in the mobile preview I have noticed that the number fields aren't aligning with the mobile screen and dropdown fields using my iphone browser.

I have attached some screen shots to demonstrate the problem.

My updated form can be found here.

https://form.jotform.co/72942029042856

Please inject the following custom css code inform and that should fix the issue you are having with mobile devices:

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

.form-line.form-line-column {

    width: 50% !important;

}

.form-line-column.form-col-1 {

    width: 50% !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 

Thanks a lot
...