Gravity Forms Styling in WPTouch Pro « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

foodin65
Member

Hello,

I've got a small problem with Gravity Forms and WPTouch Pro.

This is the page with the form I'm having issues with:
http://nlightonline.com/marketing-consult-mlp/

The form works properly both in desktop and in the mobile theme, but when on the mobile theme the first half of the 'First Name' and 'Last Name' fields are cut-off and don't show up properly. This doesn't affect the way the form functions, just the way it looks.

How do I fix this for the mobile theme (I'm seeing this issue when using an iPhone).

I have another, more complex, form that you can look at to see the same issue here:
http://nlightonline.com/apply-for-a-job/

This one isn't as important because I'm not using it in my mobile marketing campaign, but I assume the fix would help both forms.

Thanks a ton.

PS - here is a link to the exact same topic thread I started on the WPTouch Pro Forums:
http://www.bravenewcode.com/support/topic/gravity-forms-styling-in-wptouch-pro

Posted 13 years ago on Friday December 31, 2010 | Permalink
Kevin Flahaut
Administrator
Okay, I found the issue. It's a problem caused by the plugin/theme CSS. On line 1 of the style-min.css file here:

http://nlightonline.com/wp-content/plugins/wptouch-pro/themes/classic/iphone/style-min.css

there is a rule that sets a negative 11px text indent on any UL or OL element inside the "post" container. These kind of blanket CSS rules are pretty sloppy (but sadly not uncommon), so your form is inheriting that rule and the left side of the inputs/labels are being cut off.

.post ul,.post ol{font-size:90%;color:#555;text-indent:-11px;line-height:130%;margin-right:15px;margin-left:20px;margin-bottom:10px;}

What you'll want to do is override that rule (and a padding issue) with something like this.
```
body.wptouch-pro .post .gform_wrapper .gform_body ul.gform_fields {text-indent:0!important; margin:0; padding:0}

body.wptouch-pro .post .gform_wrapper .gform_body ul.gform_fields li {padding-left:0!important}
```
here's my test screenshot: http://grab.by/89gU

Give that a shot and you should be good to go.
Posted 13 years ago on Saturday January 1, 2011 | Permalink
foodin65
Member

Thank You So Much Kevin!

You are now my hero for the day. :)

Posted 13 years ago on Saturday January 1, 2011 | Permalink
foodin65
Member

Kevin I have one more question that has a similar answer.

On the more complex form:
http://nlightonline.com/apply-for-a-job/

whenever there is a list of options they show up stair stacked with the checkbox covering the first letter of the option it represents.

I'd like them to line up properly, but this isn't really mission critical because I'm not marketing this form for mobiles. So any help is appreciated.

Posted 13 years ago on Saturday January 1, 2011 | Permalink
Kevin Flahaut
Administrator
It's related to the same thing. You just need to override the negative text-indent property for those radio/checkbox lists as well.
```
body.wptouch-pro .post .gform_wrapper .gform_body ul.gfield_checkbox,
body.wptouch-pro .post .gform_wrapper .gform_body ul.gfield_radio {text-indent:0!important}
```
Screenshot: http://grab.by/89jP
Posted 13 years ago on Saturday January 1, 2011 | Permalink
2urn
Member

Great support, Thank you!

Posted 13 years ago on Sunday January 2, 2011 | Permalink
Nick
Member

Is there any way to make the reCAPTCHA more mobile friendly? On an iPhone in portrait it's a little too wide. Or maybe a way for a form to show reCAPTCHA on regular browsers but some other method on mobile?

Posted 13 years ago on Thursday March 10, 2011 | Permalink
Kevin Flahaut
Administrator

the reCaptcha field is provided via a third party service and we don't control the sizing, just include it in the forms with what few options they offer in regards to themes, etc.

There isn't a way to exclude the reCaptcha based on the platform either. What you can do is try the Really Simple Captcha plugin. If you have that installed, it will show up as an option for your captcha field in the form editor. It's quite a bit more compact than the default reCaptcha field.

http://wordpress.org/extend/plugins/really-simple-captcha/

Posted 13 years ago on Thursday March 10, 2011 | Permalink

This topic has been resolved and has been closed to new replies.