# Button Spacing For Mobile

**URL:** <https://community.elfsight.com/t/button-spacing-for-mobile/175123>\
**Category:** Customization\
**Tags:** form-builder\
**Created:** [September 25, 2026, 3:02pm UTC](https://community.elfsight.com/t/button-spacing-for-mobile/175123 "2026-09-25T15:02:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Taybraham](https://avatars.discourse-cdn.com/v4/letter/t/2bfe46/32.png) [@Taybraham](https://community.elfsight.com/u/Taybraham)\
**Post date:** [September 25, 2026, 3:02pm UTC](https://community.elfsight.com/t/button-spacing-for-mobile/175123/1 "2026-09-25T15:02:09Z")

</div>

Are we able to adjust the spacing between buttons on mobile??

I do have the following custom CSS in effect but the more I “shrink” them, the further they get from each other:

```auto
@media(max-width: 500px) {
.global-styles,
[class*="ButtonBase__ButtonContainer"] {
transform: scale(0.9);
}
}

```

Its just the last page (since the submit buttons text is longer than “Back”

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/5/e5421f09bb12b05307061ef4b63a14cc8b74cb1e.png)

On the other pages of the form, they look good!

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/a/6a22bcd779a1defaa9763dc1c642e530f30a07fa.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 25, 2026, 3:26pm UTC](https://community.elfsight.com/t/button-spacing-for-mobile/175123/3 "2026-09-25T15:26:06Z")

</div>

Hi there, @Taybraham 👋

This issue occurs because the text of the Submit button is quite long and it doesn’t fit the mobile container.

You can try to use a shorter text, for example “Submit Request” and reduce the font size of the button text using this CSS code:

```auto
    @media (max-width: 500px) {   
      .es-button-base-ellipsis {
        font-size:15px
      }
        }

```

  

Please try it out and let me know if this setup works for you 🙂

---

<div class="post-metadata">

**Author:** ![Taybraham](https://avatars.discourse-cdn.com/v4/letter/t/2bfe46/32.png) [@Taybraham](https://community.elfsight.com/u/Taybraham)\
**Post date:** [September 25, 2026, 3:41pm UTC](https://community.elfsight.com/t/button-spacing-for-mobile/175123/4 "2026-09-25T15:41:41Z")

</div>

Thanks!

I ended up doing a hybrid of your suggestion! I made it so when on mobile the button reads Submit Request & reduces the size!

@media (max-width: 500px) {  
button[aria-label=“Submit Order Request”]  
.es-button-base-ellipsis {  
font-size: 0 !important;  
}

button[aria-label=“Submit Order Request”]  
.es-button-base-ellipsis::after {  
content: “Submit Request”;  
font-size: 16px !important;  
}  
}

It’s a little wonky if you look super close compared to the Back button next to it but still looks better than it running half way off the screen 🙂

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/5/25be60bb16367c279f1e83b80ef7c6fd792536c9.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/0/f06b9acf6c879227444ef60d958b0e7b131d654a.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 25, 2026, 4:13pm UTC](https://community.elfsight.com/t/button-spacing-for-mobile/175123/5 "2026-09-25T16:13:00Z")

</div>

I see this, thanks for sharing a screenshot! Our devs will check what can be done here and I’ll update you once I have their response 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 28, 2026, 11:35am UTC](https://community.elfsight.com/t/button-spacing-for-mobile/175123/6 "2026-09-28T11:35:26Z")

</div>

Hi there, @Taybraham 👋

Thank you for waiting!

We’ve updated your CSS code and added it to your widget:

```auto
[class*='ButtonsGroup-sc'] {
    column-gap: 0px !important;
  }

  button[aria-label="Submit Order Request"] .es-button-base-overlay::before {
    content: "Submit Request";
    text-wrap: nowrap;
    font-size: 18px;
    line-height: 24px;
  }

  button[aria-label="Submit Order Request"] .es-button-base-ellipsis {
    display: none;
  }

```

  

Check it out and let me know if you like the result 😉