PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Overriding CSS Ready Classes for Mobile

  1. 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?

    I tried this, and a few variations, but no luck:

    [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;
    }}
    Posted 6 years ago on Thursday August 30, 2012 | Permalink
  2. Do you have a link to your form?

    Posted 6 years ago on Thursday August 30, 2012 | Permalink
  3. Sure, if you go to hookahi.com/support and click the email icon it will popup

    Posted 6 years ago on Thursday August 30, 2012 | Permalink
  4. 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:

    [css]
    #field_5_3 {
    width: 100%;
    }
    Posted 6 years ago on Thursday August 30, 2012 | Permalink
  5. 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.

    Posted 6 years ago on Thursday August 30, 2012 | Permalink
  6. No problem, glad to help out.

    Posted 6 years ago on Thursday August 30, 2012 | Permalink

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