# Overlapping Next/Previous buttons

**URL:** <https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755>\
**Category:** Get Help\
**Tags:** css, divi\
**Created:** [January 31, 2022, 3:13am UTC](https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755 "2022-01-31T03:13:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![patrick.mcginley](https://avatars.discourse-cdn.com/v4/letter/p/ecc23a/32.png) [@patrick.mcginley](https://community.gravityforms.com/u/patrick.mcginley)\
**Post date:** [January 31, 2022, 3:13am UTC](https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755/1 "2022-01-31T03:13:09Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/3/3045b1b74075aab8c5112d9ff13f589ed707c265.png)

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

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [January 31, 2022, 6:02am UTC](https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755/2 "2022-01-31T06:02:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![patrick.mcginley](https://avatars.discourse-cdn.com/v4/letter/p/ecc23a/32.png) [@patrick.mcginley](https://community.gravityforms.com/u/patrick.mcginley)\
**Post date:** [February 1, 2022, 4:26am UTC](https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755/3 "2022-02-01T04:26:09Z")

</div>

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](https://forms.ppcpartnersinc.com/itasset-order-form/#gf_2)

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [February 1, 2022, 6:52am UTC](https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755/4 "2022-02-01T06:52:59Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![patrick.mcginley](https://avatars.discourse-cdn.com/v4/letter/p/ecc23a/32.png) [@patrick.mcginley](https://community.gravityforms.com/u/patrick.mcginley)\
**Post date:** [February 10, 2022, 4:50pm UTC](https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755/5 "2022-02-10T16:50:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [February 10, 2022, 4:55pm UTC](https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755/6 "2022-02-10T16:55:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/f/fef63f0599c45e0218c30d9f5d7ca8bff9b00189.png) [@system](https://community.gravityforms.com/u/system)\
**Post date:** [March 12, 2022, 4:55pm UTC](https://community.gravityforms.com/t/overlapping-next-previous-buttons/11755/7 "2022-03-12T16:55:56Z")

</div>

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