How to style forms for mobile using flexible / reactive design

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!