iPhone Landscape Orientation

So I still cannot figure out how to get the phone and email fields to line up on the same line with the correct margin and padding, similar to the first and last name fields above them.

Also, I cannot seem to target the sublabels so that they are the same font size as the first and last name fields.

Desktop view and iPad portrait and landscape orientation work correctly.

Here's a screenshot from my iPhone 6 in landscape orientation...

I have checked your form and it seems to be working correctly at my end.

May we know which part/field in the form do you want to adjust?

My apologies, I may have not viewed the website correctly in landscape mode.

Kindly try adding these custom CSS in your form.

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

.form-sub-label{
font-size:15px;/*kindly adjust to your desired size*/

}

}

Let us know how it goes.

Thank you.

 All that does is just make the sub labels bigger in iPhone portrait orientation and match the sub lablel font sizes in iPhone landscape. So it actually makes it worse.

What is the font size for the sub labels for the first name and last name fields? The DevTools shows the font size for the phone and email fields to be...

.form-sub-label {
   

font-size: 0.786em;

}

It seems that this should be the font size for the other fields sub labels.

Also, my original question included how to make the phone and email fields look like the first name and last name fields (on the same line...inline).

Hello,

I have added some css to your form and it seems to have the correct layout at lightbox in landscape now:

Please check your form again and let us know if you need any further assistance.

 Thank you Victoria, that seemed to work! :-)

Any chance I could get the phone and email fields to look like the first name and last name fields above them?

Glad to know that this issue is now resolved. 

As far as I understand, you want to place email and phone fields on 1 line. 

Let me some time to pick the correct codes for you. I will update you via this thread. 

Please try the following code:

.form-line-column {

  width: 50% !important;

}

and remove this part 

This should work this way:

Let us know how it goes. 

 Okay, you're a keeper! That was exactly what I was looking for.

Thank you Victoria!

I'll leave you guys alone now (for awhile).

Oops, I almost forgot...

I have moved your question to a new thread.

Kindly follow this link https://www.jotform.com/answers/1605181

Thank you.