-
culturabicicletaAsked on July 4, 2025 at 9:40 AM
Greetings:
When I open this form in phone version (iphone) it does not allow me to make the single selection due to the size of the button. Please assist as I dont know how to work CSS
This is what I'm using
.p_checkbox {
transform: scale(1.8) !important;
z-index: margin: 3 1 1;;
Page URL: https://form.jotform.com/242707143157858 -
Raymond JotForm SupportReplied on July 4, 2025 at 10:08 AM
Hi culturabicicleta,
Thanks for reaching out to Jotform Support. Before applying some CSS codes, I suggest moving the multiple choice field option to the one with the label first. Let me show you how:
- In Form Builder, click on the Multiple Choice field, and on the Gear icon under it.
- Next, click on the Options tab on the right, and add the other option.
- Click on the Advanced tab and Disable the Shrink option.
- Right-click on the other Multiple Choice field and click the Hide option.
1. First, copy this code:
/* increase checkbox size - 28653631*/
.form-checkbox:checked + label:before, .form-checkbox+label:before {
transform: scale(1.8);
align-self: anchor-center;
}
.form-checkbox:checked+label:after {
transform: scale(1.8);
}
@media screen and (max-width: 480px) {
.form-checkbox-item {
padding-bottom: 10px;
}
}
/* Ends here */
2. Next, in Form Builder, click on the Paint Roller icon on the right and click on the Styles tab on the Form Designer menu.
3. Then, scroll down to the Inject Custom CSS box and paste the codes there.
This is how it would appear:
That's it. Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.
Give it a try and let us know if you need any help.