Overlapping Next/Previous buttons

Get Help
,
1

Not sure when it started, but gravity forms now has the next and previous buttons overlap.

image

The site uses Divi themes but I haven’t changed anything there. This is on all my sites that use Gravity Forms.

Thanks in advance,

Patrick

2

Can you share a link to the page on any of the sites where we can see the issue with the buttons? Thank you.

3

Sure, we are testing this form for a few of our companies but it’s not locked yet:

https://forms.ppcpartnersinc.com/itasset-order-form/#gf_2

4

Hi Patrick. On that page, you have some custom CSS that specifically targets the next/previous buttons:

ibody #gform_wrapper_2 .gform_footer .gform_button,
body #gform_wrapper_2 .gform_page_footer .gform_button,
body #gform_wrapper_2 .gform_page_footer .gform_previous_button,
body #gform_wrapper_2 .gform_page_footer .gform_next_button {
 border-style: solid;
 height:40px;
 color:#ffffff;
 background-color:#dd3333;
 font-size:22px;
 width:60%;
 border-width: 0px;
}

The width: 60% is what is fouling you up here. Two buttons side by side are going to take up at least 120% of the width, which means they end up stacking. You will need to revise that CSS to make the buttons more like 40%, and then work out the button placement (floating left and right or spacing them otherwise.) It will be better to modify this existing CSS since it specifically targets the buttons on this form, rather than trying to override the CSS.

If you have any other questions, please let us know.

5

Thank you for the suggestion. I removed the above custom CSS, but it didn’t resolve the problem - nor change the site in any manner (wondering if I made a mistake.) Any further assistance would be welcome.

Patrick

6

Hi Patrick. Where did you add the CSS? Can you share a screenshot of the file where you added it, or the URL of the file if you know it?

7

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