How to align Submit Button in the center using CSS?

Hi everyone,

I am working with the form: Clone of Kieser Fitness and have 2 questions, which I tried to find out but no solution.

1. The Submit Button is at the center of desktop and Tablet but it is not in the middle of mobilephone. I would like to know how can I fix this?

2. How can I have nice spacing between right and left items.

 

Thanks a lot!

Please paste the following CSS code to achieve the desired output:

.form-all {

    box-shadow : none !important;

}

.checklist label {

    color : #ffffff !important;

}

.items-left {

    color : #FDE12B;

    font-style : normal;

    font-size : 15px;

    padding-bottom : 0;

    padding-top : 0;

    margin-top : 0;

    margin-bottom : 0;

}

.form-section{

  padding:30px 0px !important;

}

.form-line{

  padding-left:20px;

  padding-right:20px;

}

#cid_71 .form-pagebreak-back-container{

  display:none;

}

#cid_71 .form-pagebreak-next-container{

  display:inline-block;

  margin-left:0%;

  width:100% !important;

  text-align:center;

}

#form-pagebreak-next_71{

  display:inline-block;

  width:150px !important;

  max-width:80% !important;

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

  #form-pagebreak-next_71{

    width:80% !important;

    max-width:80% !important;

  }

}

Please follow this link to know more about injecting CSS codes.

I hope this helps. Please do let us know if you have any other queries.

Thanks a lot:) The Button works perfekt, but there is no spacing between left items and right items if the text is too long:(

I removed some padding to add space but it seems we need more space than that. However, the amount of space is limited on a mobile device.

Would you like to break the long text to the new line? Or perhaps reduce the font-size?

Hey, Thanks for your answer. I would like to break it to the new line. And how can I do it?

You may do that injecting the following CSS code: 

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

li.list-item label {

    width: 80%;

}

}

This needs to be injected to the widget, here is the guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

Thanks. 

Thanks for your help. I would like to have one more question: Why the button "Zurück" is not in the middle even I changed the code: 

#cid_71 .form-pagebreak-back-container{

   display:inline-block;

  margin-left:0%;

  width:100% !important;

  text-align:center;

}

#form-pagebreak-back_71{

  display:inline-block;

  width:150px !important;

  max-width:80% !important;

}

Thanks again for your help!

Try this code: 

.form-section:last-child .form-pagebreak-back-container {

    width: fit-content !important;

    margin-left: auto !important;

    margin-right: auto !important;

    float: none;

}

This code needs to be injected to the form itself, this guide will provide you the steps: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Thanks. 

Thanks a lot!!!