City, State, and Zip on one line

Hi, I was able to figure out how to use CSS to get City, State and Zip on the same line and adjust the field widths.

In build mode, it looks like this (the labels for State and Zip are in the wrong place):

But when I preview it, the labels are correct:

Here's the code I'm using:

#input_81_city {

    width: 250px !important;

}

#input_81_state {

    width: 50px !important;

}

#input_81_postal {

    width: 100px !important;

}

#input_81_state {

    position: relative;

    left: -182px;

}

#input_81_postal {

    position: relative;

    left: 346px;

    top: -50px;

}

#sublabel_81_state {

    position: relative;

    left: -182px;

}

#sublabel_81_postal {

    position: relative;

    left: 346px;

    top: -50px;

}

A few questions:

1) Why does it look weird in Build mode but correct in Preview mode?

2) How can I eliminate the excess blank space below Address (above Phone Numbers)?

3) If the user's browser window is too narrow, or in phone or tablet mode, the city and state fields overlap - how can I avoid this?

1) Why does it look weird in Build mode but correct in Preview mode?

Sometimes changes made by themes applied to the form and things of that nature can override the look in the form builder. With the address field, the fields are styled by default to be in block position., but if you published or previewed the form, that property will be overridden by the codes you injected.

2) How can I eliminate the excess blank space below Address (above Phone Numbers)?

If you're referring to the Phone numbers in the Input Table field, you can set the padding to 0. Here's an example:

.form-matrix-values {

    padding: 0;

}

3) If the user's browser window is too narrow, or in phone or tablet mode, the city and state fields overlap - how can I avoid this?

Since you have injected custom CSS codes with static values into the form, it will be applied as well even on mobile. What I can suggest is to reset the values of those properties by using the @media query.

1) Great, thanks for explaining this

2) The blank space is coming from the Address field (not phone numbers). I moved the zip code up, but the line is still part of the field size

3) Would you mind giving more details on how to code the @media query?

2) The blank space is coming from the Address field (not phone numbers). I moved the zip code up, but the line is still part of the field size

We cannot adjust the address field so we'll adjust the Input Table field instead.

You can use this code:

li#id_151 {

    margin-top: -50px;

}

3) Would you mind giving more details on how to code the @media query?

I'm sorry, here's a code you can use:

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

#input_81_state {

    left: 0px!important;

    top: 0px!important;

}

label#sublabel_81_state {

    left: 0px!important;

}

input#input_81_postal {

    left: 100px;

    top: -63px!important;

}

label#sublabel_81_postal {

    left: 100px!important;

    top: -63px!important;

}

}

The codes inside @media queries will only be executed when the form is accessed on mobile.

You're a genius! Everything is fixed except one minor thing. I can't figure out how to decrease the space between "Secondary phone number" input and the radio buttons below, in mobile version. It's fine in desktop version.

I tried this injecting this inside the @media query:

input#id_86 {

    top: -20px!important

}

But it didn't have any effect

I just discovered that the Tablet version has a persistent problem with alignment of the state and postal code. Would you be able to suggest an @media solution for this?

Please add this line margin-top: 0px !important; in the Id selector li#id_86

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

li#id_86 {
    position: relative;
    top: -20px !important;
    margin-top: 0px !important;
}

}

Let us know if you have further questions on this.

Thanks.

Awesome - that did the trick!