Button Spacing For Mobile

Ask the Community Customization
1

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:

@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
image474×139 1.61 KB

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

image
image474×142 1.73 KB

3

Hi there, @Taybraham :waving_hand:

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:

    @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 :slightly_smiling_face:

4

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 :slight_smile:

image
image518×104 1.42 KB

image
image1301×161 2.26 KB

5

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 :slightly_smiling_face:

6

Hi there, @Taybraham :waving_hand:

Thank you for waiting!

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

[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 :wink: