-
louisgrisworldhomecareAsked 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
Page URL: https://form.jotform.com/80524930820149 -
AdrianReplied on February 22, 2018 at 1: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.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;} -
louisgrisworldhomecareReplied on February 22, 2018 at 1:08 PM
Hi Adrian,
I pasted the code and unfortunately only the text in the buttons changed, not the buttons themselves.
Thanks,
Louis
-
AdrianReplied on February 22, 2018 at 1: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
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.
-
louisgrisworldhomecareReplied on February 22, 2018 at 1: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
-
AdrianReplied on February 22, 2018 at 2: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:
-
louisgrisworldhomecareReplied on February 23, 2018 at 10:03 AM
Worked perfectly. Thanks for the help!