Responsive Layout Changes

Using 2.5.13 and in my form I am using the class gf_simple_horizontal in my forms setting to create a gorgeous horizontal form that looks and works wonderful.

However, it just collapses the fields on a tablet and on mobile, staying horizontal and looks awful. I would much rather it go vertical for a tablet and phone, and center the fields.

Does not appear to be any kind of quick way to do that, looks like I am going to have to slog through a lot of CSS to make it work.

Can anyone point me to a better solution? Thanks!

What you’re getting is the expected Larry, as pointed on the documentation for CSS Ready Classes they don’t apply to mobile devices.

A dirty hack that you could try is to get the CSS rules for gf_simple_horizontal from the gravityforms/legacy/css/readyclass.css file (search by /* simple horizontal form ready class - very simple implementation for up to 5 fields and a button */ to locate where they start).
And copy them to any place your theme provides to add custom CSS or to the WordPress Customizer.

Then wrap them with a media query to target mobile devices. You can find some suggestions for media queries to use in the following link.

That said, note that your form is just part of your page content, therefore you’re not limited to Gravity Forms resources to edit your form styles, any third-party plugin intended to visually customize your page styles will also cover your form styling, see some examples below:

( This one has specific support for Gravity Forms ​​​https://www.csshero.org/plugins/gravity-forms/ ).

1 Like

Yep, going to have to slog through all the CSS. Thanks for the clarification.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.