Centering back and next buttons

  • Profile Image
    louisgrisworldhomecare
    Asked on February 22, 2018 at 11:54 AM

    Hello,


    When I use the advanced CSS editor to center and enlarge the back and next buttons, the question headers left align and wrap text instead of extending horizontally the entire width of the form. Any idea?


    Thanks,

    Louis

  • Profile Image
    Adrian
    Answered on February 22, 2018 at 01:01 PM

    Please try centering the buttons using Custom CSS only and avoid using the Advanced Designer.
    Copy and paste the CSS code below to your form to center the Next and Back buttons.
    Adjust the font size as you wish to make the buttons bigger.

    .form-pagebreak {
        text-align: center !important;
    }
    #cid_29 .form-pagebreak .form-pagebreak-back-container:first-child {
        display: none;
    }
    .form-all .form-pagebreak-back,
    .form-all .form-pagebreak-next {
        font-size: 18px;
    }
  • Profile Image
    louisgrisworldhomecare
    Answered on February 22, 2018 at 01:08 PM

    Hi Adrian,


    I pasted the code and unfortunately only the text in the buttons changed, not the buttons themselves.


    Thanks,


    Louis

  • Profile Image
    Adrian
    Answered on February 22, 2018 at 01:20 PM

    I have cloned your form and pasted this CSS code.

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

        font-size: 18px;

        padding: 15px 30px;

    }

    .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container {

      float: none;

      display: inline-block;

    }

    .form-pagebreak {

      text-align: center;

    }

    https://form.jotform.com/80525641421954

    1519323479ttt.gif

    The buttons are centered and their size changed.

    You can adjust the font size and the padding as you wish.

    Let us know if you need further help.

  • Profile Image
    louisgrisworldhomecare
    Answered on February 22, 2018 at 01:35 PM

    Great, this worked for desktop view. Is there any way to make the buttons appear on the same line on mobile? They appear stacked as is.


    Thanks,

    Louis

  • Profile Image
    Adrian
    Answered on February 22, 2018 at 02:32 PM

    Please add this additional CSS.

    .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container {

      max-width: 49%;

    }

    @media screen and (max-width: 689px) {

      .jotform-form .form-all {

        margin: auto !important;

      }

    }

     

    Here is how the form looks on smaller screens:

    1519327599mob.png

  • Profile Image
    louisgrisworldhomecare
    Answered on February 23, 2018 at 10:03 AM

    Worked perfectly. Thanks for the help!