[orangecrushParticipant]

Hi, so I updated to 2.0, but need some help.

I am still using the “temporary” mobile CSS from Gravity forms, as everything is worse without it. But still have these problems:

1. The quantity fields are really tall. Can’t remember if that normal, but looks a bit weird.
2. The two columns no longer work on the three “Select Services” pages. Only shows one column.
3. The toggle buttons with longer text beside them drop down to another line on MOBILE.
4. The Contact name, address and email portions could also line up better. (The second half)
5. The checkbox, toggle button could line up better with the text beside it.

Please help. Its frustrating because wpforms and formidable forms work so nice with no custom CSS. Yet, Gravity Forms always needs a ton with Theme X. Unfortunately it is the still the only forms that can do what I need.

Thanks so much.

[orangecrushParticipant]

This reply has been marked as private.

[orangecrushParticipant]

One more thing. How can I use a different google font weight for just my Form page?

Thanks again!

[ChristopherModerator]

Hi there,

Please provide us with URL of page in question.

Thanks.

[orangecrushParticipant]

http://www.getfreshcarpetcleaning.ca/quote/

[ChristianModerator]

1. Please add the code below in your Appearance > Customize > Custom > CSS

body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper select, body .gform_wrapper textarea {
    height: 1.65em;
}

2. The setup is one column (see attachment). Can you give us details of what this looks before?

3. Please add the code below

@media only screen and (max-width: 798px) {
body .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']), body .gform_wrapper select, body .gform_wrapper textarea {
    width: 43% !important;
    margin-right: 6% !important;
}
}

4-5. Please give us details by what you mean by “could also line up better”

Thanks.

[orangecrushParticipant]

Thanks for helping!

Please see image showing an example of the toggle button/text alignment issue.

[orangecrushParticipant]

Please see example of pricing fields not showing in two column mode. All the pricing field were set-up with one-half and two-halfs CSS classes. no longer working.

[orangecrushParticipant]

Please see example of the name, address and email box. Could the First anme box length be the same length as the Email, Contact Number, and City, so the Last name, Confirm Email and Postal Code line up?

[orangecrushParticipant]

5. Please see picture. On desktop, the toggle buttons and check boxes are a bit higher then the text beside it. They are lined up nicely in mobile. Not a huge deal.

[orangecrushParticipant]

Hi,

This code you gave, does not work. While it reduced the height, the text in the quantity box is not aligned and so it cuts it off as you can see in the attached image.

body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper select, body .gform_wrapper textarea {
height: 1.65em;
}

[orangecrushParticipant]

Hi,

This code you gave, does not work either. Still the same problem as you can see in the mobile image below. Under location of cleaning, the lower toggle button, the text beginning with Apartment, is moved to the line below.

Thanks for helping.

[orangecrushParticipant]

Also, the preview does not work. Blank.

[ChristopherModerator]

Hi there,

Please add this code :

@media (max-width:767px){
.gform_wrapper.gf_browser_safari .gfield_checkbox li input, .gform_wrapper.gf_browser_safari .gfield_checkbox li input[type=checkbox], .gform_wrapper.gf_browser_safari .gfield_radio li input[type=radio] {
    margin-top: 4px;
    vertical-align: baseline;
}
span.ginput_product_price_label, .gform_wrapper span.ginput_product_price, span.ginput_quantity_label, .ginput_quantity{
    width: 22% !important;
    float: left !important;
}
span.ginput_quantity_label {
    margin-right: 20px !important;
}

.ginput_quantity {
    height: 1em !important;
    line-height: 1em !important;
}
}

span#input_1_64_3_container {
    width: 47%;
}

Hope it helps.

[orangecrushParticipant]

Hi,

No, it did not do anything.

To be clear, the problem with the quantity fields and multi-column is only on Desktop.

The problem with toggle button and long text not been responsive is only on mobile.

Thanks!

[Author]

Posts