Change Submit Button Location based on Screen Size

Hello all! I’m new to Gravity Forms, so your help is appreciated. I’m attempting to create a pretty simple email submission form. The form is in a 2-column layout opposite some text. The issue I’m running into is that while I want my submit button to be inline with the email input, as the screen size starts to narrow, the form doesn’t look great between 1280px and 980px. At 980px, the page layout switches to 1-column and things look good again.

So, between those 2 screen sizes, I’m hoping to get the submit button to shift below the email input. I found the Ready Classes way to move the submit button ( gf_simple_horizontal), but I’m having trouble figuring out how that Ready Class actually positions the button so I can change it up with a media query.

Can anyone clarify how I can accomplish this? I searched and didn’t find other topics that dealt with this. Thanks!

Hi Colin. Can you share a link to the page on your site where we can see the form and test it in the different screen sizes? Thank you.

Hey Chris! I put together a little test page that you can access: http://test.voomcreative.com/form-test. You’ll be able to see the 2-column layout. Essentially, I’m trying to prevent the scenario where the input field gets too narrow to read the placeholder text, so I’m hoping between roughly 1280px and 980px to move the Submit button below the input field, and then it can revert to being inline with it once the layout switches to single-column.

Also, not as pressing, but what is the best way to increase the width of the input field so that it fills the width of it’s container, but will automatically reduce in width as the screen size gets smaller?

© 2008 - 2019. Gravity Forms is a project by Rocketgenius Inc.