You are viewing limited content. For full access, please sign in.

Question

Question

How to Center the Submit Button on Desktop & Mobile

Forms
Updated November 21, 2022
asked on November 18, 2022

I'm currently using the following CSS to center the submit button, however it appears only to work on a desktop view, not when adapted for mobile:

/*Centers the Submit Button*/
div.btn-wrapper {display:block}
.Submit {display:block;margin:auto}

Is there any code that could be used to center it on both desktop AND mobile? I'm already using some @media attributes to use certain CSS depending on the pixel width of the display, if that makes it any easier. Thanks!

0 0

Answer

SELECTED ANSWER
replied on November 20, 2022

Hi Dylan,

For mobile view, there are some out-of-box CSS style on the submit button. You can use !important to make yours effective. Please try

/*Centers the Submit Button*/
div.btn-wrapper {display:block}
.Submit {display:block;margin:auto !important}

 

2 0
replied on November 21, 2022 • Show version history

Well that was easy! Haha, thank you very much, Ziyan!

I ended up making some slight adjustments to add a bit more white space between the last field and the submit button since it looked a bit too crowded to my eyes.

If anyone else feels the same, here's the final CSS I ended up with:

/*Centers the Submit Button*/
div.btn-wrapper {display:block; transform: translate(0, +50%);}
.Submit {display:block;margin:auto !important}

Thanks again!

1 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...