https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro Gravity Support Forums Topic: Gravity Forms Styling in WPTouch Pro en-US Tue, 21 Apr 2026 05:36:41 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro#post-20306 Wed, 09 Mar 2011 22:48:18 +0000 Kevin Flahaut 20306@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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.</p> <p><a href="http://wordpress.org/extend/plugins/really-simple-captcha/" rel="nofollow">http://wordpress.org/extend/plugins/really-simple-captcha/</a> </p> https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro#post-20304 Wed, 09 Mar 2011 22:25:25 +0000 Nick 20304@https://legacy.forums.gravityhelp.com/ <p>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? </p> https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro#post-15289 Sun, 02 Jan 2011 02:32:20 +0000 2urn 15289@https://legacy.forums.gravityhelp.com/ <p>Great support, Thank you! </p> https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro#post-15276 Fri, 31 Dec 2010 22:37:55 +0000 Kevin Flahaut 15276@https://legacy.forums.gravityhelp.com/ <p>It's related to the same thing. You just need to override the negative text-indent property for those radio/checkbox lists as well.</p> <pre><code>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}</code></pre> <p>Screenshot: <a href="http://grab.by/89jP" rel="nofollow">http://grab.by/89jP</a> </p> https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro#post-15275 Fri, 31 Dec 2010 22:19:05 +0000 foodin65 15275@https://legacy.forums.gravityhelp.com/ <p>Kevin I have one more question that has a similar answer. </p> <p>On the more complex form:<br /> <a href="http://nlightonline.com/apply-for-a-job/" rel="nofollow">http://nlightonline.com/apply-for-a-job/</a></p> <p>whenever there is a list of options they show up stair stacked with the checkbox covering the first letter of the option it represents. </p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro#post-15274 Fri, 31 Dec 2010 22:05:15 +0000 foodin65 15274@https://legacy.forums.gravityhelp.com/ <p>Thank You So Much Kevin!</p> <p>You are now my hero for the day. :) </p> https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro#post-15273 Fri, 31 Dec 2010 20:47:41 +0000 Kevin Flahaut 15273@https://legacy.forums.gravityhelp.com/ <p>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:</p> <p><a href="http://nlightonline.com/wp-content/plugins/wptouch-pro/themes/classic/iphone/style-min.css" rel="nofollow">http://nlightonline.com/wp-content/plugins/wptouch-pro/themes/classic/iphone/style-min.css</a></p> <p>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.</p> <p><code>.post ul,.post ol{font-size:90%;color:#555;text-indent:-11px;line-height:130%;margin-right:15px;margin-left:20px;margin-bottom:10px;}</code></p> <p>What you'll want to do is override that rule (and a padding issue) with something like this.</p> <pre><code>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}</code></pre> <p>here's my test screenshot: <a href="http://grab.by/89gU" rel="nofollow">http://grab.by/89gU</a></p> <p>Give that a shot and you should be good to go. </p> https://legacy.forums.gravityhelp.com/topic/gravity-forms-styling-in-wptouch-pro#post-15270 Fri, 31 Dec 2010 19:23:27 +0000 foodin65 15270@https://legacy.forums.gravityhelp.com/ <p>Hello,</p> <p>I've got a small problem with Gravity Forms and WPTouch Pro. </p> <p>This is the page with the form I'm having issues with:<br /> <a href="http://nlightonline.com/marketing-consult-mlp/" rel="nofollow">http://nlightonline.com/marketing-consult-mlp/</a></p> <p>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. </p> <p>How do I fix this for the mobile theme (I'm seeing this issue when using an iPhone).</p> <p>I have another, more complex, form that you can look at to see the same issue here:<br /> <a href="http://nlightonline.com/apply-for-a-job/" rel="nofollow">http://nlightonline.com/apply-for-a-job/</a></p> <p>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. </p> <p>Thanks a ton. </p> <p>PS - here is a link to the exact same topic thread I started on the WPTouch Pro Forums:<br /> <a href="http://www.bravenewcode.com/support/topic/gravity-forms-styling-in-wptouch-pro" rel="nofollow">http://www.bravenewcode.com/support/topic/gravity-forms-styling-in-wptouch-pro</a> </p>