Submit & reset button inline help

Support
1

Hello. Using the delivernext theme. I’ve added a reset button to the contact form, but the placement is off. I wish to have it where the green box is. On the receptar theme, it aligned perfectly with the same class submit.

2025-09-28_16-36-45
2025-09-28_16-36-45964×838 30.6 KB

_2025-09-28_16-39-12
_2025-09-28_16-39-12540×108 22.2 KB

2

I’d assume btn-block class makes both buttons as block elements

3

@duceduc, That’s because css forces <button> to use block layout, while by default a <button> is inline.

.contact button {
    font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    text-transform: uppercase;
    display: block;
}

After fixing that, the button is displayed in the center because of:

form .buttons {
    text-align: center;
}

There are multiple solutions possible:

  • Fix the above issues mentioned above and add some margin to the <button>
  • Or use display: flex and add some margin
4

Well, it would be interesting to open an issue in the repository of the theme so that I can take it into account for future versions. Almost all the styles of this theme are inherited from the original Deliver theme.

5

According to @pamtbaau, I’ve made a change that I’ll integrate into the next version of the theme, in the _forms.scss file, leaving the code as follows:

form {
.buttons {
text-align: center;
display: flex;
justify-content: flex-start;
gap: 1rem;
}

This will make the buttons in the same block inline. All that remains is to compile the main.css and main.min.css files again to see the result.

image
image1450×1034 15.2 KB

1 Like
6

Updated DeliverNext theme and Skeleton with these changes and more.

1 Like