https://legacy.forums.gravityhelp.com/topic/how-to-style-forms-for-mobile-using-flexible-reactive-design Gravity Support Forums Topic: How to style forms for mobile using flexible / reactive design en-US Sat, 04 Apr 2026 22:54:24 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/how-to-style-forms-for-mobile-using-flexible-reactive-design#post-49961 Mon, 20 Feb 2012 11:25:07 +0000 Kevin Flahaut 49961@https://legacy.forums.gravityhelp.com/ <p>Thanks for posting. I'm sure lots of folks will find this useful. </p> https://legacy.forums.gravityhelp.com/topic/how-to-style-forms-for-mobile-using-flexible-reactive-design#post-49955 Mon, 20 Feb 2012 10:47:11 +0000 sscovil 49955@https://legacy.forums.gravityhelp.com/ <p>Hello,</p> <p>I have my website styled differently for mobile devices like iPhone when they are being viewed in portrait orientation (max-width 320px). I wanted to style Gravity Forms differently as well, so that each form field appears on a separate line instead of side-by-side.</p> <p>As I was writing to ask for help, I got it to work...so I figured I'd just post the solution here in case anyone else is trying to do the same thing.</p> <p>This is reactive CSS that detects a max screen width of 320px and changes the way forms are displayed on the fly:</p> <pre><code>@media only screen and (max-width : 320px) { .ginput_left, .ginput_right, .gf_left_half, .gf_right_half { clear: both !important; float: left !important; width: 80% !important; } }</code></pre> <p>See it in action here: <a href="http://seaportvet.com/services/forms/" rel="nofollow">http://seaportvet.com/services/forms/</a></p> <p>Enjoy! </p>