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.

How to style forms for mobile using flexible / reactive design

  1. Hello,

    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.

    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.

    This is reactive CSS that detects a max screen width of 320px and changes the way forms are displayed on the fly:

    @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;
    	}
    }

    See it in action here: http://seaportvet.com/services/forms/

    Enjoy!

    Posted 8 years ago on Monday February 20, 2012 | Permalink
  2. Thanks for posting. I'm sure lots of folks will find this useful.

    Posted 8 years ago on Monday February 20, 2012 | Permalink