https://legacy.forums.gravityhelp.com/topic/overriding-css-ready-classes-for-mobile Gravity Support Forums Topic: Overriding CSS Ready Classes for Mobile en-US Sun, 19 Apr 2026 23:34:40 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/overriding-css-ready-classes-for-mobile#post-73289 Thu, 30 Aug 2012 11:40:00 +0000 Rob Harrell 73289@https://legacy.forums.gravityhelp.com/ <p>No problem, glad to help out. </p> https://legacy.forums.gravityhelp.com/topic/overriding-css-ready-classes-for-mobile#post-73276 Thu, 30 Aug 2012 10:50:00 +0000 ktrusak 73276@https://legacy.forums.gravityhelp.com/ <p>Oh, that's because captcha never renders correctly on mobile devices (in my theme at least), but I think you are absolutely right that the captcha is the source of the problem. I think I just need to adjust the form, thanks for your help. </p> https://legacy.forums.gravityhelp.com/topic/overriding-css-ready-classes-for-mobile#post-73273 Thu, 30 Aug 2012 10:40:35 +0000 Rob Harrell 73273@https://legacy.forums.gravityhelp.com/ <p>I believe that the issue is the captcha is a "hard-defined" width that gets pulled in. What if you tried this in your media query to put it on it's own line:</p> <pre><code>[css] #field_5_3 { width: 100%; }</code></pre> https://legacy.forums.gravityhelp.com/topic/overriding-css-ready-classes-for-mobile#post-73270 Thu, 30 Aug 2012 10:35:11 +0000 ktrusak 73270@https://legacy.forums.gravityhelp.com/ <p>Sure, if you go to hookahi.com/support and click the email icon it will popup </p> https://legacy.forums.gravityhelp.com/topic/overriding-css-ready-classes-for-mobile#post-73268 Thu, 30 Aug 2012 10:32:58 +0000 Rob Harrell 73268@https://legacy.forums.gravityhelp.com/ <p>Do you have a link to your form? </p> https://legacy.forums.gravityhelp.com/topic/overriding-css-ready-classes-for-mobile#post-73266 Thu, 30 Aug 2012 10:29:07 +0000 ktrusak 73266@https://legacy.forums.gravityhelp.com/ <p>The gf_left/right_half css classes don't render well on some screens so I am trying to figure out how to essentially override them for mobile devices but am not having much luck. Do you guys know of a good way to do this?</p> <p>I tried this, and a few variations, but no luck:</p> <pre><code>[css] @media only screen and (max-width: XXXpx) { li.gfield.gf_left_half, .gf_left_half { width: 97% !important; } li.gfield.gf_right_half, .gf_right_half { width: 97% !important; }}</code></pre>