Custom css help lining up fields.

I've already had some assistance, but would appreciate some more. Some things are better and a couple have regressed.

1: I have decided to split the table into two, which I did by duplicating the field. I have added what I thought was the same CSS codes for positioning and field width, but they aren't working. So firstly, can the 'Whole camp' labels and fields be the same width as the 'Day visitor' table.

2: The 'Whole camp' and 'Day visitors' labels are quite distant from their tables. Can they be moved closer together as in the example below?

Current and desired examples below:

3: The amounts fields are lined up nicely in the designer, but on some screens the label widths are now variable, even more so that in the first panel below:

Current and preferred:

4: The email input field is now being indented to the left a little on some screens

5: I get what '@media only screen and (max-device-width: 768px)' are trying to do, and I've changed it to '1024px'. Is there some doco on what they actually do and all options?

Thanks again,

David

Please inject the following custom css code in your form and see if that solves your problem:

#cid_103 {

    margin-top: -40px !important;

}

#cid_82 {

    margin-top: -50px !important;

}

label#label_99, label#label_69, label#label_100, label#label_65, label#label_46, label#label_47, label#label_49 {

    width: 105px !important;

    padding-right: 10px !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 

For  the issue related to email field, I would suggest you to please share a screenshot of the issue and we will take a look. The following guide should help you how to upload image in forum post: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

For you question related to @media only css code, I would suggest you to please take a look at the following guide which should help you: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope this helps.

Do get back to us if you have any questions.

That's very good - thanks. Now all I need is for the 'Whole camp' table (the one with just one column), to have the same label and field widths as the 'Day visitors' table. What I need is shown in the images above.

Thanks again,

David

It seems that you have already fixed the issue. The label and the field's width of the WHole camp table appear exactly the same as the Day visitor table.

let us know if you have further questions.

Thanks.

That's just on the graphic I dummied up. If you look at the form, it's still wrong. Tks.

Please try the CSS code below:

 #cid_103 .form-matrix-table{

   width: 55% !important;

 }