Responsive Gravity Forms

When you have managed to setup your contact form, order form or other form with Gravity Forms in two columns you will soon realize it is not responsive out of the box. You will need additional CSS to go from two columns to one column on smaller screen sizes.

Responsive Two Column Form with Gravity Forms

To make a two column Gravity Forms form resize to one column on smaller screen sizes you will need to add CSS like you would normally do for certain screen size specific styling. You will need to add media queries with CSS selector making the columns float left.

Here a snippet to do just that based on the answer by Brad on Stack Overflow here :

The classes  .gf_left_half and .gf_right_half are GF (Gravity Forms) classes that help left and right align fields. The media query is needed to decide when to float these properly for certain screen sizes.

The actual media query can be adjusted to your liking of course, but for most situations this works just fine. For me it did.

For more Gravity Forms CSS Styling examples see this Gravity Forms document online.

Tagged in : Tagged in : , ,
Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.