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;
}}Do you have a link to your form?
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%;
}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.
No problem, glad to help out.